.products_nav ul
{
    display : flex;
}


.products_nav li
{
    flex       : 1 1 33.3%;
    text-align : center;
}


.products_nav li a:not(.active)
{
    filter : saturate(0);
}


.products_grid
{
    background    : #FFFFFF;
    counter-reset : tile;
}


.product
{
    padding           : 15px;
    border            : 1px solid #DDDDDD;
    border-top-color  : transparent;
    border-left-color : transparent;
    text-align        : center;
/ / width: 20 % !important;
}


.product a
{
    color           : #333333 !important;
    text-decoration : none !important;
}


.product:nth-child(5n)
{
    border-right-color : transparent;
}


.product:nth-last-child(5), .product:nth-last-child(5) ~ .product
{
    border-bottom-color : transparent;
}


.panel-inner-banner
{
    position : relative;
    display  : block;
}


.panel-inner-banner:before
{
    content     : " ";
    display     : block;
    padding-top : 100%;
}


.panel-inner-banner img
{
    max-width  : 100%;
    max-height : 100%;
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    transition : transform 0.3s ease;
}


/*.panel:hover .panel-inner-banner img
{
transform : translate(-50%, -50%) scale(1.1);
}*/
.ph-product-strapline
{
    font-size      : 20px;
    font-weight    : 900;
    text-transform : uppercase;
    opacity        : 0.66;
    height         : 1.2em;
    white-space    : nowrap;
    padding-top    : 15px;
    box-sizing     : content-box;
    letter-spacing : 0px;
}


.ph-product-intro
{
    height     : 5.2em;
    overflow   : hidden;
    margin-top : 5px;
}


.ph-product-intro p
{
    white-space : nowrap;
    font-size   : 14px;
}


.product figure
{
    display : none;
}


.product var
{
    left          : 5px;
    top           : 10px;
    position      : absolute;
    font-style    : normal;
    font-size     : 13px;
    z-index       : 101;
    background    : #FFFFFF;
    padding       : 6px;
    border-radius : 50%;
    display       : inline-block;
    width         : 30px;
    height        : 30px;
    text-align    : center;
}


.product var:before
{
    content : counter(tile);
}


.product
{
    counter-increment : tile;
}


.product-card .ph-product-image
{
    border-radius    : 8px;
    transform        : translate(-53%, -50%) perspective(100px) rotateX(0deg) rotateY(-3deg) rotateZ(0deg) scale(0.95);
    transform-origin : center center;
    top              : 50%;
    left             : 50%;
    position         : absolute;
}


#product[data-product-id="291"] .ph-product-image,
#product[data-product-id="295"] .ph-product-image,
#product[data-product-id="297"] .ph-product-image,
#product[data-product-id="298"] .ph-product-image,
#product[data-product-id="301"] .ph-product-image
{
    border-radius    : 8px;
    transform        : perspective(100px) rotateX(0deg) rotateY(3deg) rotateZ(0deg) scale(0.95);
    transform-origin : center center;
}


#title
{
    opacity        : 0;
    pointer-events : none;
}


#title > p
{
    position       : absolute;
    color          : #FFFFFF;
    z-index        : 1;
    font-weight    : 600;
    font-size      : 27px;
    letter-spacing : 0;
    top            : 9px;
    left           : 18px;
}


#title span
{
    float              : left;
    width              : 10%;
    display            : block;
    text-align         : center;
    position           : relative;
    -webkit-mask-image : url("https://secure.parliament-hill.co.uk/content/_pdf/providers/907/mask.png");
    mask-image         : url("https://secure.parliament-hill.co.uk/content/_pdf/providers/907/mask.png");
    -webkit-mask-size  : 100%;
    mask-size          : 100%;
    transform          : scale(1.1);
    box-shadow         : inset 0 0 40px rgba(0, 0, 0, 0.15);
}


#title span:before
{
    content     : " ";
    display     : block;
    padding-top : 100%;
}


#title span em
{
    position    : absolute;
    font-style  : normal;
    font-weight : 900;
    top         : 50%;
    left        : 48%;
    font-size   : 4.5vw;
    transform   : translate(-50%, -50%) scale(1.35);
    line-height : 1;
}


.col-md-9 #title span em
{
    transform : translate(-50%, -50%) scale(1);
}


#title span em:first-child
{
    z-index                 : 2;
    -webkit-text-fill-color : transparent;
    -webkit-background-clip : text;
    background-image        : url(https://secure.parliament-hill.co.uk/content/_pdf/providers/907/blots.png);
    background-size         : 3vh;
}


#title span em:nth-child(2)
{
    z-index : 1;
}


#title span img
{
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    max-width  : 70%;
    max-height : 70%;
}


#title span:nth-child(3n-1) em:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_pdf/providers/907/slashes.png);
}


#title span:nth-child(3n-2) em:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_pdf/providers/907/stripes.png);
}


#modal-band
{
    overflow-y : auto;
}


#product .close_button
{
    position      : absolute;
    z-index       : 1001;
    border-radius : 50%;
    top           : 10px;
    right         : 10px;
    width         : 50px;
    height        : 50px;
    line-height   : 33px;
    font-size     : 50px;
    text-align    : center;
    background    : #FFFFFF;
    border-width  : 2px;
}


@media all and (min-width : 600px)
{
    #modal-band
    {
        overflow-y : visible;
    }

    #product .close_button
    {
        transform : translateY(-50%);
        top       : 0;
        right     : -25px;
    }
}


@media all and (min-width : 992px) and (max-width : 1199px)
{
    .ph-product-strapline
    {
        font-size : 17px;
    }
}


@media all and (min-width : 1200px)
{
    #title span em
    {
        font-size : 70px;
    }
}


#product .close_button:hover
{
    color : inherit;
}


#product .row a
{
    text-decoration : underline;
}


#product h2
{
    margin         : 0;
    padding        : 0;
    position       : absolute;
    z-index        : 1;
    bottom         : 0;
    left           : 0;
    font-size      : 150px;
    opacity        : 0.06;
    pointer-events : none;
    height         : 150px;
    letter-spacing : -20px;
    overflow       : hidden;
    max-width      : 100vw;
}


#product h2:after
{
    content : "";
    height  : 100%;
    display : inline-block;
}


#product h3, #product h4
{
    font-weight   : bold;
    margin-bottom : 10px;
}


#product .ph-product-image
{
    width : 100%;
}


#product .ph-product-provider-image
{
    display    : block;
    margin     : 10px auto;
    max-width  : 100%;
    max-height : 100px;
}


#product .ph-product-summary ol
{
    list-style-type : decimal;
}


#product .ph-product-summary li
{
    margin-top : 10px;
}


#product .ph-product-summary li:only-child
{
    list-style : none;
}


#product .ph-product-retailer-image
{
    display    : none;
    max-height : 65px;
    max-width  : 120px;
    float      : left;
}


#product .ph-product-price
{
    width       : 65px;
    height      : 65px;
    padding     : 0;
    line-height : 65px;
    font-size   : 19px;
    background  : #333333;
    color       : #FFFFFF;
    float       : right;
}


#product .product-redeem
{
    text-align : center;
    font-size  : 11px;
}


#product .ph-redeem-button
{
    position : relative;
    z-index  : 2;
}


#product code
{
    padding        : 2px 6px;
    border         : 1px dashed #E0E0E0;
    color          : #333333;
    background     : #F2F2F2;
    font-weight    : bold;
    border-radius  : 4px;
    letter-spacing : 1px;
}


.ph-product-badge:not(:empty)
{
    position   : absolute;
    padding    : 6px 20px;
    color      : #FFFFFF;
    z-index    : 1;
    font-style : normal;
    left       : 0px;
    top        : 40px;
}


.ph-product-badge:not(:empty):after
{
    content   : "";
    display   : block;
    transform : skew(-10deg) translateX(-15px);
    left      : 100%;
    top       : 0;
    bottom    : 0;
    position  : absolute;
    width     : 20px;
}


.gifting-intro p
{
    font-size     : 14px;
    margin-bottom : 10px;
}


#title span
{
    width : 12.5%
}


#title span em
{
    font-size : min(6vw, 100px);
}


/*
#title span
{
transform : translateX(-8px) !important;
}
#title span.inv
{
transform : translateX(8px) !important;
}*/
.calendar
{
    display       : flex;
    flex-wrap     : wrap;
    counter-reset : tile;
}


/*DG EDITS 18/10/2023 */
:root
{
    --adv_W     : 240px;
    --adv_H     : 320px;
    --base_bg   : hsl(150deg, 25%, 40%);
    --accent_bg : hsl(180deg, 25%, 80%);
}


.stripe-silver
{
    position         : relative;
    background-color : var(--base_bg);
}


.stripe-silver:after
{
    --s             : 100px;
    /*--c1            : #668284;*/
    /*--c2            : #B6D8C0;*/
    /*--c3            : #B9D7D9;*/

    --c2            : color-mix(in hsl shorter hue, var(--base_bg) 15%, var(--accent_bg));
    --c1            : color-mix(in hsl shorter hue, var(--base_bg) 75%, var(--accent_bg));
    --c3            : color-mix(in hsl shorter hue, var(--base_bg) 95%, var(--accent_bg));

    --_g            : #0000, var(--c1) 1deg 30deg, var(--c2) 31deg 89deg, var(--c1) 90deg 119deg, #0000 120deg;

    display         : block;
    position        : absolute;
    content         : " ";
    width           : 100%;
    height          : 100%;
    top             : 0;
    z-index         : 1;
    background      : conic-gradient(from -60deg at 50% 28.86%, var(--_g)),
    conic-gradient(from 30deg at 71.14% 50%, var(--_g)),
    conic-gradient(from 120deg at 50% 71.14%, var(--_g)),
    conic-gradient(from 210deg at 28.86% 50%, var(--_g)) var(--c3);
    background-size : var(--s) var(--s);
    opacity         : 0.5;
}


.stripe-silver .inner
{
    z-index : 2;
}


.products_grid
{
    background : transparent;
}


.product
{
    padding : 0;
    border  : none;
}


.product:before
{
    display    : block;
    content    : " ";
    width      : 1px;
    background : repeating-linear-gradient(0, transparent, transparent 10px, #333333 10px, #333333 20px);
    position   : absolute;
    height     : 100%;
    translate  : -1px 0;
}


.backDoor
{
    width    : var(--adv_W);
    height   : var(--adv_H);
    position : relative;
    margin   : 0 auto 50px;
}


.product > a[href]
{
    display          : block;
    background-color : #FFFFFF;
    border-radius    : 4px 8px 8px 4px;
    box-shadow       : 0 0 0 1px #444444;
    overflow         : hidden;
    cursor           : pointer;
    height           : var(--adv_H);
    filter           : brightness(0.75);
    transition       : filter 0.5s ease-in-out;
    translate        : 1px 0;
    margin-right     : 1px;
}


.product > a[href]:after
{
    display    : block;
    content    : " ";
    position   : absolute;
    inset      : 0;
    background : linear-gradient(270deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 100%);
}


.product:hover > a[href],
.product:has(input:checked) > a[href]
{
    filter : brightness(1.0);
}


.product input
{
    display : none;
}


.product label
{
    position : absolute;
    inset    : 0;
    z-index  : 101;
    cursor   : pointer;
}


.product var
{
    left             : 10px;
    font-weight      : bold;
    font-size        : 28px;
    padding          : 0;
    width            : auto;
    height           : auto;
    border-radius    : unset;
    background-color : transparent;
}


.ph-product-badge:not(:empty)
{
    top : 20px;
}


.ph-product-badge:not(:empty), .ph-product-badge:not(:empty):after
{
    background-color : var(--SCHEME_BG_1);
}


.door
{
    width            : var(--adv_W);
    height           : var(--adv_H);
    position         : absolute;
    top              : 0;
    left             : 0;
    z-index          : 99;
    transform-origin : left;
    transition       : all 0.5s ease-in-out;
    cursor           : pointer;
    background-color : transparent;
    pointer-events   : none;
    transform-style  : preserve-3D;
}


.product:hover .door
{
    transform : perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg) !important;
}


.product:has(input:checked) .door
{
    transform : perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-95deg);
}


.product:nth-child(3n+1):has(input:checked) .door
{
    transform : perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-93deg);
}


.product:nth-child(3n+2):has(input:checked) .door
{
    transform : perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-97deg);
}


.product .door:after
{
    display    : block;
    content    : " ";
    position   : absolute;
    width      : 100%;
    height     : 80%;
    translate  : 0 -50%;
    background : rgba(0, 0, 0, 0.0);
    filter     : blur(30px);
    z-index    : -1;
    top        : 50%;
    left       : 0;
    transition : left 0.5s ease-in-out, background 0.5s ease-in-out;
}


.product:hover .door:after,
.product:has(input:checked) .door:after
{
    background : rgba(0, 0, 0, 0.25);
    left       : 25%;
}


.door > *
{
    position                    : absolute;
    inset                       : 0;
    transform                   : translateZ(1px);
    -moz-backface-visibility    : hidden;
    -webkit-backface-visibility : hidden;
    backface-visibility         : hidden;
    overflow                    : hidden;
}


.door > *:first-child
{
    /*background-image    : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/door.png);*/
    background-image    : url(../images/present-2.png);
    background-size     : 100%;
    background-color    : var(--base_bg);
    background-repeat   : no-repeat;
    background-position : center 10px;
    border-radius       : 2px 6px 6px 2px;
    filter              : brightness(1.0);
    transition          : filter 0.5s ease-in-out;
    transition-delay    : 0s;
    color               : #FFFFFF;
}


.backDoor:nth-child(1) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/candy.png);
}


.backDoor:nth-child(2) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/holly.png);
}


.backDoor:nth-child(3) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/bauble1.png);
}


.backDoor:nth-child(4) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/gift2.png);
}


.backDoor:nth-child(5) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/gingerbread-man.png);
}


.backDoor:nth-child(6) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/teapot.png);
}


.backDoor:nth-child(7) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/pudding.png);
}


.backDoor:nth-child(8) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/gift3.png);
}


.backDoor:nth-child(9) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/bauble2.png);
}


.backDoor:nth-child(10) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/mittens.png);
}


.backDoor:nth-child(11) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/gift4.png);
}


.backDoor:nth-child(12) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/wreath.png);
}


.backDoor:nth-child(13) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/jumper.png);
}


.backDoor:nth-child(14) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/christmas-tree.png);
}


.backDoor:nth-child(15) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/gift5.png);
}


.backDoor:nth-child(16) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/gift1.png);
}


.backDoor:nth-child(17) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/robin.png);
}


.backDoor:nth-child(18) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/father-christmas.png);
}


.backDoor:nth-child(19) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/snowglobe.png);
}


.backDoor:nth-child(20) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/bauble3.png);
}


.backDoor:nth-child(21) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/hot-chocolate.png);
}


.backDoor:nth-child(22) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/robin.png);
}


.backDoor:nth-child(23) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/cake.png);
}


.backDoor:nth-child(24) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/stocking.png);
}


.backDoor:nth-child(25) .door > *:first-child
{
    background-image : url(https://secure.parliament-hill.co.uk/content/_i/products/advent/bauble2.png);
}


.product:hover .door > *:first-child,
.product:has(input:checked) .door > *:first-child
{
    filter           : brightness(0.75);
    transition-delay : 0.15s;
}


.door > *:last-child
{
    border-radius : 6px 2px 2px 6px;
    background    : #AAAAAA;
    transform     : rotateY(180deg);
}


.door > *:last-child:after
{
    display    : block;
    content    : " ";
    position   : absolute;
    inset      : 0;
    background : linear-gradient(90deg, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.2) 100%);
}


.door > *:last-child var
{
    background       : none;
    opacity          : 0.125;
    font-size        : var(--adv_H);
    line-height      : var(--adv_H);
    scale            : 1.3;
    transform-origin : center;
    text-align       : center;
    letter-spacing   : -35px;
    left             : 50%;
    translate        : -50% 0;
}


.ph-product-strapline
{
    font-size   : 28px !important;
    color       : #FFFFFF !important;
    white-space : normal;
    position    : absolute;
    bottom      : 0;
    padding     : 15px;
    height      : auto;
    opacity     : 1;
    width       : 100%;
    box-sizing  : border-box;
}


.panel-inner-banner img
{
    width      : 100%;
    height     : 100%;
    transform  : none;
    inset      : 0;
    top        : 0;
    left       : 0;
    transition : none;
}


.ph-product-intro
{
    margin      : 0;
    white-space : nowrap;
    padding     : 5px 0;
    width       : 100%;
    font-size   : 14px;
    height      : 5.5em;
    line-height : 1.3;
    display     : block;
}
