@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);
:root {
    /* TYPOGRAPHY */
    --header-font: "filson-soft", "Montserrat", sans-serif;
    --body-font: "Montserrat", sans-serif;
    /* Base font */
    --base-font-size: 20px;
    --base-line-height: 1.2rem;
    /* Small font */
    --small-font-size: 0.8rem;
    --small-line-height: 1rem;
    /* Tiny font */
    --tiny-font-size: 0.7rem;
    --tiny-line-height: 0.9rem;
    /* Heading 1 */
    --h1-font-size: 1.8rem;
    --h1-line-height: 2rem;
    /* Heading 2 */
    --h2-font-size: 1.6rem;
    --h2-line-height: 1.8rem;
    /* Heading 3 */
    --h3-font-size: 1.4rem;
    --h3-line-height: 1.6rem;
    /* Heading 4 */
    --h4-font-size: 1.2rem;
    --h4-line-height: 1.4rem;
    /* Heading 5 */
    --h5-font-size: 1.0rem;
    --h5-line-height: 1.2rem;
    /* Heading 6 */
    --h6-font-size: 0.8rem;
    --h6-line-height: 1.0rem;
    /*  Weights */
    --regular: 400;
    --semi-bold: 500;
    --bold: 700;

    /* COLOURS */
    /* Primary Palette */
    --G400: hsl(94, 59%, 40%);
    /* GREEN */

    --N300: hsl(94, 10%, 85%);
    /* LIGHTER GREY */
    --N0: hsl(0, 100%, 100%);
    /* WHITE */
    /* Secondary Palette */
    --G200: hsl(94, 59%, 75%);
    --G300: hsl(94, 59%, 50%);
    /* GREEN HOVER */
    --G500: hsl(94, 59%, 30%);
    /* GREEN ACTIVE */
    --B300: hsl(198, 100%, 55%);
    /* BLUE HOVER*/
    --B400: hsl(198, 100%, 45%);
    /* BLUE */
    --B500: hsl(198, 100%, 35%);
    /* YELLOW HOVER */
    --Y100: hsl(48, 100%, 95%);
    /* BLUE ACTIVE */
    --Y300: hsl(47, 100%, 74%);
    /* YELLOW HOVER */
    --Y400: hsl(47, 100%, 64%);
    /* YELLOW */
    --Y500: hsl(47, 100%, 54%);
    --Y800: hsl(40, 100%, 40%);
    /* YELLOW ACTIVE */
    --R250: hsl(346, 92%, 66%);
    /* Pink */
    --R100: hsl(0, 85%, 95%);
    /* Pink */
    --R300: hsl(0, 85%, 55%);
    /* RED HOVER */
    --R400: hsl(0, 85%, 45%);
    /* RED */
    --R500: hsl(0, 85%, 35%);
    /* RED ACTIVE */
    /* Neutrals */
    --TRANSPARENT: hsl(0, 100%, 100%, 0%);
    --G50: hsl(94, 59%, 99%);
    /* OFF WHITE */
    --G100: hsl(94, 59%, 96%);
    /* OFF WHITE */
    --N50: hsl(94, 10%, 98%);
    --N100: hsl(94, 10%, 96%);
    /* LIGHTEST GREY */
    --N250: hsl(94, 10%, 90%);
    /* LIGHT GREY */
    --N350: hsl(96, 5%, 60%);
    /* MUTED GREY */
    --N400: hsl(92, 5%, 50%);
    /* GREY */
    --N500: hsl(96, 5%, 40%);
    /* DARKER GREY */
    --N600: hsl(97, 5%, 33%);
    /* DARK GREY */
    --N750: hsl(96, 10%, 20%);
    /* DARKEST GREY */
    --N800: hsl(90, 6%, 13%);
    /* BLACK */
    --N1000: hsl(0, 0%, 0%);
    /* TRUE BLACK */
    /* Extended Secondary Palette */
    --B100: hsl(198, 100%, 96%);

    --P100: hsl(264, 100%, 96%);
    --P400: hsl(264, 100%, 45%);

    /* Sizes */
    --border-radius: 0.2rem;
    --rounded: 100vmax;
    --gap: 1rem;
    --smallest-gap: 0.2rem;
    --smaller-gap: 0.4rem;
    --small-gap: 0.6rem;
    --smallish-gap: 0.8rem;
    --big-gap: 2rem;
    --bigger-gap: 3rem;
    --massive-gap: 4rem;
    --input-padding: 0.4rem 0.8rem;
    --check-radio-size: 0.8rem;
    --label-width: 10rem;
    --transition-duration: 0.2s;
    --progress-bar-height: 0.4rem;
    --centered-box-width: 26rem;
    --header-image-height: 7rem;
    interpolate-size: allow-keywords;
}

/* global resets */
*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

*:disabled {
    opacity: 0.5;
    filter: grayscale(0.5);
    user-select: none;
    cursor: not-allowed;
    pointer-events: none;
}

body,
html {
    accent-color: var(--G400);
    background-color: var(--N0);
    color: var(--N600);
    font-family: var(--body-font);
    font-size: var(--base-font-size);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

img,
picture {
    max-width: 100%;
    display: block;
}

p {
    font-size: 1rem;
    line-height: var(--base-line-height);
    margin: 0 0 var(--base-line-height) 0;
}

small {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    margin: 0 0 var(--small-line-height) 0;
}

small:last-child {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--header-font);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin: 0 0 var(--small-gap) 0;
}

h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--regular);
    line-height: var(--h1-line-height);
    margin: var(--small-gap) 0;
    text-wrap: balance;
    color: var(--G400);
}


h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--regular);
    line-height: var(--h2-line-height);
    margin: var(--small-gap) 0;
    text-wrap: balance;
}

h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--regular);
    line-height: var(--h3-font-size);
    margin: var(--small-gap) 0;
}

h4 {
    font-size: var(--h4-font-size);
    font-weight: var(--regular);
    line-height: var(--h4-line-height);
    margin: var(--small-gap) 0;
}

h5 {
    font-size: var(--h5-font-size);
    font-weight: var(--regular);
    line-height: var(--h5-line-height);
    margin: var(--h5-line-height) 0 var(--small-gap) 0;
    text-transform: uppercase;
}

h6 {
    font-size: var(--h6-font-size);
    font-weight: var(--regular);
    line-height: var(--h6-line-height);
    margin: var(--h6-line-height) 0 var(--small-gap) 0;
    text-transform: uppercase;
}

strong {
    font-weight: var(--semi-bold);
}

a {
    color: var(--B400);
    border-radius: var(--border-radius);
    text-underline-offset: 2px;
}

a:not(:is(:hover, :focus)) {
    text-decoration-color:
      color-mix(in srgb, currentColor, transparent 50%);
  }

a:focus-visible {
    outline: 2px solid var(--B400);
    outline-offset: 2px;
}

a:hover {
    color: var(--B300);
}

a:active {
    outline: none !important;
    color: var(--B500);
}

/* Lists and tables */
table {
    border-collapse: collapse;
}

th {
    background-color: var(--N100);
    font-weight: bold;
}

td,
th {
    border: 1px solid var(--N250);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    padding: 0.4rem;
}

.p-page {
    max-width: 40rem;
    margin: 2rem auto;
}

/* Form elements */
label,
input,
select,
button,
textarea,
.p-button {
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

input,
textarea {
    border: 1px solid var(--N250);
    border-radius: var(--border-radius);
    padding: var(--input-padding);
    background-color: var(--N0);
}

input:hover,
select:hover,
textarea:hover {
    border: 1px solid var(--N500);
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border: 1px solid var(--B400);
    outline: none;
}

select {
    --arrow-size: 6px;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  border: 1px solid var(--N250);
    border-radius: var(--border-radius);
    padding: var(--input-padding);
    padding-right: calc(2 * (0.8rem + var(--arrow-size)));
    background-color: var(--N0);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--N500) 50%),
    linear-gradient(135deg, var(--N500) 50%, transparent 50%);
  background-position:
    calc(100% - 10px - (2 * var(--arrow-size))) 1em,
    calc(100% - 10px - var(--arrow-size)) 1em;
  background-size:
    var(--arrow-size) var(--arrow-size),
    var(--arrow-size) var(--arrow-size);
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}

select:active {
    background-image:
    linear-gradient(45deg, transparent 50%, var(--B400) 50%),
    linear-gradient(135deg, var(--B400) 50%, transparent 50%);
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.p-button {
    -webkit-appearance: none;
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    white-space: normal;
    word-wrap: break-word;
    height: fit-content;
}

div[type="hidden"] {
    display: none;
}

.p-input-error {
    border: 1px solid var(--R400);
}

.p-form-row,
.p-radio-row,
.p-checkbox-row {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    justify-content: flex-start;
}

.p-form-row {
    align-items: baseline;
}

.p-form-buttons {
    padding-left: calc(var(--label-width) + var(--small-gap));
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

.p-radio-row,
.p-checkbox-row {
    align-items: flex-start;
}

.p-form-row>label {
    width: var(--label-width);
    text-align: right;
}

.p-form-row:focus-within>label,
.p-checkbox-row:focus-within>label,
.p-radio-row:focus-within>label {
    color: var(--B400);
}

.p-form-row input,
.p-form-row select,
.p-form-row textarea,
.p-checkbox-row label,
.p-radio-row label {
    flex-grow: 1;
}

.p-checkbox-row input[type="checkbox"],
.p-radio-row input[type="radio"] {
    text-align: right;
    margin-left: calc(var(--label-width) - var(--check-radio-size));
    line-height: var(--small-line-height);
}

.p-checkbox-group,
.p-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-radio-group h6,
.p-checkbox-group h6 {
    margin: 0 0 0 calc(var(--label-width) + var(--small-gap));
}

input[type="checkbox"],
input[type="radio"] {
    height: var(--check-radio-size);
    margin: 0;
    padding: 0;
    width: var(--check-radio-size);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--B400);
  outline-offset: 2px;
}

form {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

dl {
    margin: 0;
}

dt {
    margin-top: var(--small-gap);
}

dd {
    margin: 0;
    padding: 0;
}

details {
    border-bottom: 1px solid var(--N250);
}

details summary::-webkit-details-marker,
details summary::marker {
    display: none;
}

details>summary {
    list-style: none;
}

summary {
    font-family: var(--header-font);
    padding-block: 1rem;
    padding-right: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

summary:hover {
    color: var(--B400);
}

summary .title {
    margin-bottom: 0;
    pointer-events: none;
}

summary>.p-icon {
    font-size: var(--h4-font-size);
    transform: rotate(0deg);
    transition: transform var(--transition-duration);
    pointer-events: none;
}

details[open]>summary>.p-icon {
    transform: rotate(180deg);
}

details>div {
    padding-bottom: 1rem;
}

@media screen and (max-width: 600px) {
    .p-form-row {
        flex-direction: column;
        width: 100%;
    }

    .p-form-row label {
        text-align: left;
        width: 100%;
    }

    .p-form-row input,
    .p-form-row select,
    .p-form-row textarea {
        width: 100%;
    }

    .p-checkbox-row input[type="checkbox"],
    .p-radio-row input[type="radio"] {
        margin-left: 0;
        text-align: left;
    }

    .p-radio-group h6,
    .p-checkbox-group h6 {
        margin: 0;
    }

    form {
        gap: var(--big-gap);
    }

    .p-form-buttons {
        padding: 0;
        flex-direction: column;
    }
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.p-button {
    --button-color: var(--N100);
    display: block;
    background-color: var(--button-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--button-color);
    box-shadow: 0px 0px 0px hsl(0, 0%, 0%, 0.0);
    color: var(--N600);
    font-weight: var(--semi-bold);
    padding: var(--input-padding);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-duration), border-color var(--transition-duration), box-shadow var(--transition-duration);
    white-space: nowrap;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.p-button:hover {
    --button-color: var(--N50);
    box-shadow: 0px 1px 5px hsl(0, 0%, 0%, 0.2);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.p-button:active {
    --button-color: var(--N250);
    box-shadow: 0px 0px 0px hsl(0, 0%, 0%, 0.0);
    outline: none;
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.p-button:focus-visible {
    outline: 2px solid var(--B400);
    outline-offset: 2px;
}

.p-button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--small-gap);
}

.p-button-group button,
.p-button-group input[type="submit"],
.p-button-group input[type="button"],
.p-button-group input[type="reset"],
.p-button-group .p-button {
    flex: 1;
}

@media screen and (max-width: 600px) {
    .p-button-group {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        gap: var(--small-gap);
    }

    .p-button-group button,
    .p-button-group input[type="submit"],
    .p-button-group input[type="button"],
    .p-button-group input[type="reset"],
    .p-button-group .p-button,
    .p-button-group button.p-medium-button,
    .p-button-group input[type="submit"].p-medium-button,
    .p-button-group input[type="button"].p-medium-button,
    .p-button-group input[type="reset"].p-medium-button,
    .p-button-group .p-button.p-medium-button {
        padding: var(--gap);
    }
}

.p-medium-button,
button.p-medium-button,
input[type="submit"].p-medium-button,
input[type="button"].p-medium-button,
input[type="reset"].p-medium-button,
.p-button.p-medium-button {
    padding: 0.6rem 1rem;
}

.p-large-button {
    padding: var(--gap) var(--big-gap);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}


.p-primary {
    --button-color: var(--G400) !important;
    color: var(--N0) !important;
}

.p-primary:hover {
    --button-color: var(--G300) !important;
}

.p-primary:active {
    --button-color: var(--G500) !important;
}

.p-secondary {
    --button-color: var(--B400) !important;
    color: var(--N0) !important;
}

.p-secondary:hover {
    --button-color: var(--B300) !important;
}

.p-secondary:active {
    --button-color: var(--B500) !important;
}

.p-destructive {
    --button-color: var(--R400) !important;
    color: var(--N0) !important;
}

.p-destructive:hover {
    --button-color: var(--R300) !important;
}

.p-destructive:active {
    --button-color: var(--R500) !important;
}


.p-outline-button {
    background-color: transparent;
    color: var(--button-color) !important;
}

.p-disabled,
.p-disabled .p-button {
    opacity: 0.4;
    filter: none;
    user-select: none;
    cursor: not-allowed;
    pointer-events: none;
}

.p-warning-button {
    color: var(--R400);
}

.p-warning-button:hover {
    color: var(--R300);
}

.p-warning-button:active {
    color: var(--R500);
}

.p-rounded {
    border-radius: var(--rounded) !important;
}

.p-link-button {
    background-color: var(--TRANSPARENT);
    border: 1px solid var(--TRANSPARENT);
    color: var(--B400);
    text-decoration: underline;
}

.p-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smaller-gap);
    padding: 0;
}

.p-tag {
    list-style: none;
    background-color: var(--G100);
    border: 1px solid var(--G400);
    border-radius: var(--border-radius);
    font-size: var(--small-font-size);
    margin: 0;
    padding: 0.2rem 0.6rem;
}

.p-tag .p-icon {
    color: var(--G400);
}

.p-tag.green {
    background-color: var(--G100);
    border: 1px solid var(--G400);
}

.p-tag.green .p-icon {
    color: var(--G400);
}

.p-tag.blue {
    background-color: var(--B100);
    border: 1px solid var(--B400);
}

.p-tag.blue .p-icon {
    color: var(--B400);
}

.p-tag.yellow {
    background-color: var(--Y100);
    border: 1px solid var(--Y400);
}

.p-tag.yellow .p-icon {
    color: var(--Y400);
}

.p-tag.grey {
    background-color: var(--N100);
    border: 1px solid var(--N400);
}

.p-tag.grey .p-icon {
    color: var(--N400);
}

.p-tag.red {
    background-color: var(--R100);
    border: 1px solid var(--R400);
}

.p-tag.red .p-icon {
    color: var(--R400);
}

.p-breadcrumbs {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    display: flex;
    flex-wrap: wrap;
}

.p-breadcrumbs a {
    display: inline-block;
    position: relative;
}

.p-breadcrumbs .p-icon {
    margin: 0 var(--smaller-gap);
}

/* HEADER */
#p-header-container {
    background: var(--N0);
    border-bottom: 1px solid var(--N100);
    transition: all var(--transition-duration) ease-in-out;
}

#p-header-container.sticky {
    position: sticky;
    top: 0;
    z-index: 1500;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

#p-header-container.sticky #p-header {
    grid-template-areas: "logo search number basket-nav";
    grid-template-columns: 2fr 6fr 2fr 2fr;
    padding-block: var(--small-gap);
}

#p-header-container.sticky #p-header #p-header-logo {
    max-height: 40px;
}

#p-header-container.sticky #p-header #p-header-logo-img {
    width: auto;
    max-height: 100%;
}

#p-header {
    display: grid;
    gap: var(--gap);
    grid-template-areas: "logo links links account-links"
        "logo search number basket-nav";
    grid-template-columns: 2fr 6fr 2fr 2fr;
    align-items: center;
    padding: var(--gap);
    max-width: 75rem;
    margin: auto;
    transition: all var(--transition-duration) ease-in-out;
}

#p-header-logo {
    grid-area: logo;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    margin: 0px;
    padding: 0px;
}

#p-header-logo-img {
    max-width: 100%;
    height: auto;
}

#p-header-number-container {
    grid-area: number;
    text-align: center;
    display: flex;
    flex-direction: column;
}

#p-header-number-container small {
    font-size: var(--tiny-font-size);
    color: var(--G400);
}

#p-header-number-container small:empty {
    display: none;
}

#p-header-number {
    color: var(--G400) !important;
    font-weight: bold;
    font-size: var(--small-font-size);
    text-decoration: none;
}

#p-header-account-links {
    font-size: var(--small-font-size);
    grid-area: account-links;
    line-height: var(--small-line-height);
    text-align: right;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    justify-content: flex-end;
}

#p-header-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--small-font-size);
    grid-area: links;
    justify-content: space-between;
    line-height: var(--small-line-height);
}

#p-header-links a,
#p-header-account-links a {
    color: var(--N600);
    text-decoration: none;
}

#p-header-links a:hover,
#p-header-links a:active,
#p-header-account-links a:hover,
#p-header-account-links a:active,
#p-header-links .current:hover,
#p-header-links .active:hover,
#p-header-links .current:active,
#p-header-links .active:active {
    color: var(--B400);
    text-decoration: underline;
}

.p-mobile-header-link {
    display: none;
}

#p-header-links .current,
#p-header-links .active {
    color: var(--G400);
    text-decoration: underline;
}

#p-close-menu {
    display: none;
}

#p-header-basket-nav {
    grid-area: basket-nav;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#p-header-basket-nav .p-button {
    color: var(--N800);
}

#p-header-basket-nav .p-icon {
    color: var(--G400);
}

#p-header-basket-nav .p-button-message {
    color: var(--N600);
}

#p-header-menu-nav {
    display: none;
}

#p-header-menu-button {
    color: var(--N600);
    text-decoration: none;
}

#p-header-search {
    position: relative;
    grid-area: search;
    margin: 0;
    height: 2rem;
}

#p-header-search input[type="search"] {
    width: 100%;
}

#p-header-search input[type="search"]::-webkit-search-button { display: none; }

#p-header-search-icon-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    color: var(--G400);
    background-color: transparent;
    border: 1px solid var(--TRANSPARENT);
}

@media screen and (max-width: 1200px) {
    #p-header {
        gap: var(--small-gap);
        padding: var(--small-gap);
        grid-template-areas: "number number number"
            "menu-nav logo basket-nav"
            "search search search";
        grid-template-columns: auto 1fr auto;
    }

    #p-header-container.sticky #p-header {
        grid-template-areas: "menu-nav search basket-nav";
        grid-template-columns: auto 1fr auto;
    }

    #p-header-container.sticky #p-header-number-container {
        display: none;
    }

    #p-header-logo {
        height: 1.9rem;
        justify-content: center;
        margin: 0;
    }

    #p-header-container.sticky #p-header-logo {
        display: none;
    }

    #p-header-container.sticky #p-header #p-header-links {
        position: fixed;
        top: 3rem;
    }

    #p-header-logo-img {
        max-height: 1.9rem;
    }

    #p-header-number-container {
        display: flex;
        flex-direction: column;
    }

    #p-header-account-links {
        display: none;
    }

    #p-header-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: var(--N0);
        left: 0;
        top: 7.5rem;
        bottom: 0;
        border-top: 1px solid var(--N100);
        gap: var(--gap);
        padding: var(--gap);
        z-index: 2000;
        justify-content: flex-start;
        width: 100vw;
        transform: scaleY(0);
        transition: transform var(--transition-duration);
    }

    #p-header-links #p-header-number {
        display: none;
    }

    .p-mobile-header-link {
        display: inline-block;
    }

    #p-close-menu {
        display: block;
    }

    #p-header-links a {
        flex-grow: unset;
    }

    #p-header-basket-nav .p-button span {
        /* Visible for screen readers only */
        clip: rect(1px 1px 1px 1px);
        /* IE 6/7 */
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    #p-header-menu-nav {
        display: block;
        grid-area: menu-nav;
    }
}

@media screen and (min-width: 1201px) {

    #p-header-container.sticky #p-header #p-header-account-links,
    #p-header-container.sticky #p-header #p-header-links {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    #p-header-container.sticky #p-header {
        grid-template-areas: "menu-nav logo basket-nav"
            "search search search";
    }

    #p-header-container.sticky #p-header-logo {
        display: flex;
    }

    #p-header-container.sticky #p-header #p-header-links {
        position: fixed;
        top: 5.75rem;
    }

    #p-menu-layout-sidebar-content.sticky-header,
    #p-sidebar-layout-sidebar-content.sticky-header {
        top: 5.75rem !important;
    }
}

/* RECOMMENDATIONS */
.p-product-detail-recommendations {
    background-color: var(--N100);
    border-top: solid 1px var(--N250);
    border-bottom: solid 1px var(--N250);
    padding: var(--bigger-gap) var(--gap);
    width: 100%;
    overflow: hidden;
}

.p-product-detail-recommendations .products {
    padding-top: var(--big-gap);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--bigger-gap);
    margin-inline: auto;
    flex-wrap: wrap;
}

.p-product-detail-recommendations .p-product-box{
    width: 13.5rem;
}

.p-product-detail-recommendations-header {
    text-align: center;
}


@media screen and (max-width: 600px) {
    .p-product-detail-recommendations {
        padding: var(--gap);
    }

    .p-product-detail-recommendations .products {
        padding: 0;
        margin-top: var(--gap);
        gap: var(--gap);
        flex-direction: column;
    }

    .p-product-detail-recommendations .products .p-product-box {
        width: 100%;
        max-width: 100%;
        flex-grow: 0;
    }

}

.p-product-detail-recommendations .p-basket-update {
    background-color: var(--N0);
}



.p-product-detail-recommendations .products .p-truncate:after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--N100) 50%);
}

/* TRUSTPILOT */
.p-trustpilot {
    padding: var(--big-gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
}

.p-trustpilot .trustpilot-widget {
    width: 100%;
    max-width: 60rem;
}

.p-trustpilot-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-trustpilot-reviews a {
    text-decoration: none;
    color: var(--N600);
}

.p-trustpilot-review {
    text-align: center;
    padding: var(--small-gap);
    border: solid 1px var(--N250);
    background: var(--N0);
}

.p-trustpilot-review cite {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    flex-wrap: wrap;
    justify-content: center;
}

/* FOOTER */
.p-footer {
    background-color: var(--N800);
    color: var(--N0);
    display: grid;
    gap: var(--big-gap);
    grid-template-areas: "find-out find-out find-out find-out find-out find-out"
        "social account ranges about help we-take"
        "address company company company company trust";
    grid-template-columns: repeat(6, minmax(min-content, 11rem));
    padding: var(--big-gap);
    justify-content: center;
}

.p-footer-find-out {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    grid-area: find-out;
    justify-content: center;
    padding: var(--gap);
}

.p-footer-find-out h4 {
    margin: 0;
}

.p-footer-social {
    grid-area: social;
}

.p-footer-account {
    grid-area: account;
}

.p-footer-ranges {
    grid-area: ranges;
}

.p-footer-about {
    grid-area: about;
}

.p-footer-help {
    grid-area: help;
}

.p-footer-we-take {
    grid-area: we-take;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

#p-footer-facebook {
    color: hsl(220, 46%, 48%);
    padding-right: var(--smaller-gap);
}

#p-footer-instagram {
    color: hsl(26, 96%, 55%);
    padding-right: var(--smaller-gap);
}

#p-footer-linkedin {
    color: hsl(210, 90%, 40%);
    padding-right: var(--smaller-gap);
}

a:hover #p-footer-facebook,
a:hover #p-footer-instagram {
    color: var(--B400);
}

.p-footer-address {
    grid-area: address;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-footer-company {
    grid-area: company;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-footer-trust {
    grid-area: trust;
    object-fit: contain;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-footer-trust .trustpilot-widget,
.p-footer-trust .trustpilot-widget iframe {
    height: unset !important;
}

.p-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-footer-links h5 {
    margin: 0;
}

.p-footer-links a {
    color: var(--N100);
    text-decoration: none;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    display: inline-block;
    width: fit-content;
}

.p-footer-links a:hover {
    color: var(--B400);
    text-decoration: underline;
}

@media screen and (max-width: 1200px) {
    .p-footer {
        grid-template-areas: "find-out find-out find-out find-out"
            "account ranges about help"
            "address social we-take trust"
            "company company company company";
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .p-footer {
        gap: var(--gap);
        grid-template-areas: "find-out find-out"
            "account ranges"
            "about help"
            "social we-take"
            "address trust"
            "company company";
        grid-template-columns: repeat(2, 1fr);
        padding: var(--gap);
    }
}

@media screen and (max-width: 600px) {
    .p-footer {
        gap: var(--gap);
        grid-template-areas: "find-out"
            "account"
            "ranges"
            "about"
            "help"
            "social"
            "we-take"
            "address"
            "trust"
            "company";
        grid-template-columns: 1fr;
        padding: var(--gap);
    }

    .p-footer-find-out {
        flex-direction: column;
    }
}

/* LAYOUTS */
/* Sidebar layout */
#p-sidebar-layout {
    position: relative;
    max-width: 75rem;
    margin-inline: auto;
    display: grid;
    grid-template-areas: "sidebar content right-aside";
    grid-template-columns: 1fr 3fr 1fr;
    border-top: 1px solid var(--N100);
}

#p-sidebar-layout-sidebar {
    grid-area: sidebar;
    border-right: 1px solid var(--N100);
}

#p-sidebar-layout-content {
    grid-area: content;
    padding: var(--small-gap);
    scroll-behavior: smooth;
}

@media screen and (min-width: 601px) {
    #p-sidebar-layout-content {
        padding: var(--big-gap);
    }
}

#p-sidebar-layout .p-right-aside {
    grid-area: right-aside;
    padding: var(--big-gap);
}

#p-sidebar-layout-content h1:first-of-type {
    margin-top: 0;
}

.p-sidebar-layout-sidebar-link {
    text-decoration: none;
    color: var(--N600);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-sidebar-layout-sidebar-link:hover,
.p-sidebar-layout-sidebar-link:focus,
.p-sidebar-layout-sidebar-link:active {
    text-decoration: underline;
    color: var(--B400);
}

.p-sidebar-layout-sidebar-link.current {
    text-decoration: underline;
    cursor: default;
    color: var(--G400);
}

#p-sidebar-layout-sidebar-content {
    width: 100%;
    position: sticky;
    top: 0;
    background-color: var(--N0);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap);
    scroll-behavior: smooth;
    max-height: 100vh;
}

#p-sidebar-layout-close-sidebar,
#p-sidebar-layout-open-sidebar {
    display: none;
    margin-bottom: var(--gap);
}

@media screen and (max-width: 1200px) {
    #p-sidebar-layout {
        grid-template-areas: "sidebar content"
            "sidebar right-aside";
        grid-template-columns: 1fr 3fr;
    }
}

@media screen and (max-width: 900px) {
    #p-sidebar-layout {
        grid-template-areas: "content"
            "right-aside";
        grid-template-columns: 1fr;
    }

    #p-sidebar-layout-sidebar {
        display: flex;
        grid-area: none;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 80vw;
        z-index: 1000;
        box-shadow: 1px 0px 15px hsl(0, 0%, 0%, 0.05);
        transform: translateX(-100vw);
        transition: transform var(--transition-duration);

    }

    #p-sidebar-layout-close-sidebar,
    #p-sidebar-layout-open-sidebar {
        display: block;
    }
}

/* Single column layout */
.p-single-column-layout {
    width: 100vw;
}

.p-single-column-layout-content {
    width: 60vw;
    padding: var(--big-gap);
    margin: 0 auto;
}

@media screen and (max-width: 900px) {
    .p-single-column-layout-content {
        width: 80vw;
    }
}

@media screen and (max-width: 600px) {
    .p-single-column-layout-content {
        width: auto;
    }
}

/* Centered box layout */
.p-centered-box-layout {
    width: auto;
    display: grid;
    gap: var(--big-gap);
    grid-template-columns: 1fr var(--centered-box-width) 1fr;
    grid-template-areas: "left-aside content right-aside";
    background-color: var(--N100);
    padding: var(--big-gap);
}

.p-centered-box-layout-content-container {
    grid-area: content;
}

.p-centered-box-layout-content-container .p-box {
    margin-top: 0;
}

.p-box {
    padding: var(--big-gap);
    background-color: var(--N0);
    border: 1px solid var(--N250);
    border-radius: var(--border-radius);
}

.p-centered-box-layout .p-left-aside {
    grid-area: left-aside;
}

.p-centered-box-layout .p-right-aside {
    grid-area: right-aside;
}

.p-box p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

@media screen and (max-width: 900px) {
    .p-centered-box-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "content content"
            "left-aside right-aside";
    }
}

@media screen and (max-width: 600px) {
    .p-centered-box-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "content"
            "left-aside"
            "right-aside";
        padding: 0;
    }

    .p-centered-box-layout-content-container .p-box {
        margin-top: 0;
    }


    .p-box {
        border-radius: 0;
    }
}

/* Sidebar layout */
#p-menu-layout {
    position: relative;
    max-width: 75rem;
    margin-inline: auto;
    display: grid;
    grid-template-areas: "sidebar content";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 4fr;
}

#p-menu-layout-header {
    padding: var(--big-gap);
    border-bottom: 1px solid var(--N100);
    display: grid;
    grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs"
        "title title title"
        "tags tags tags"
        "number sorting-by-label sorting-by";
    grid-template-columns: 3fr 1fr auto;
    gap: var(--small-gap);
}

#p-menu-layout-header-title {
    grid-area: title;
    margin: 0;
    color: var(--G400);
    display: flex;
    flex-direction: row;
}

#p-menu-layout-header-title h1,
#p-menu-layout-header-title h2 {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#p-menu-layout-header-breadcrumbs {
    grid-area: breadcrumbs;
}

#p-menu-layout-applied-flags {
    display: none;
}

#p-menu-layout-header-tags {
    grid-area: tags;
    margin-block: 0;
    align-items: baseline;
}

#p-menu-layout-header-tags .remove-tag,
#p-menu-layout-header-tags .flag-reset-button {
    cursor: pointer;
}

#p-menu-layout-header-number {
    grid-area: number;
    padding-top: calc(0.4rem + 1px);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

#p-menu-layout-header-sorting-by-label {
    padding-top: calc(0.4rem + 1px);
    grid-area: sorting-by-label;
    text-align: right;
}

#p-menu-layout-header-sorting-by {
    grid-area: sorting-by;
}

#p-menu-layout-sidebar {
    grid-area: sidebar;
    border-right: 1px solid var(--N100);
}

#p-menu-layout-sidebar-content {
    width: 100%;
    position: sticky;
    top: 0;
    background-color: var(--N0);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap);
    padding-bottom: var(--big-gap);
    scroll-behavior: smooth;
    max-height: 100vh;
}

.p-homepage-hero-container .p-preferences-row-container,
#p-menu-sidebar-offer-code .p-preferences-row-container,
#p-menu-layout-offer-code .p-preferences-row-container {
    display: none;
}

#p-menu-layout-sidebar-content.sticky-header,
#p-sidebar-layout-sidebar-content.sticky-header {
    top: 3rem;
}

#p-menu-layout-sidebar-content::-webkit-scrollbar {
    width: var(--small-gap);
}

#p-menu-layout-sidebar-content::-webkit-scrollbar-track {
    background-color: var(--N100);
}

#p-menu-layout-sidebar-content::-webkit-scrollbar-thumb {
    background-color: var(--N250);
}

#p-menu-layout-sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--N400);
}

#p-menu-layout-content {
    grid-area: content;
    scroll-behavior: smooth;
}

#p-menu-layout-content-products {
    padding: var(--big-gap);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--big-gap);
}

@media screen and (max-width: 600px) {
    #p-menu-layout-content-products {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}

#p-menu-layout-content-products-empty {
    text-align: center;
    grid-column: 1 / -1;
}

#p-menu-layout-close-sidebar,
#p-menu-layout-open-sidebar {
    display: none;
}

#p-menu-layout-sidebar h6 {
    margin: 0;
    padding: 0;
}

#p-menu-layout-sidebar hr {
    margin: 0 calc(var(--gap) * -1);
    border-top: 1px solid var(--N100);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.p-menu-layout-category-link {
    text-decoration: none;
    color: var(--N600);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-menu-layout-category-link:hover,
.p-menu-layout-category-link:focus,
.p-menu-layout-category-link:active {
    text-decoration: underline;
    color: var(--B400);
}

.p-menu-layout-category-link.current {
    text-decoration: underline;
    cursor: default;
    color: var(--G400);
}

.p-depth-1 {
    padding-left: var(--gap);
}

.p-depth-2 {
    padding-left: calc(var(--gap)*2);
}

.p-selected {
    text-decoration: underline;
    color: var(--G400);
}

.p-sidebar-checkbox-row {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

.p-sidebar-checkbox-row input[type="checkbox"] {
    padding-top: 0.1rem;
}

.p-sidebar-checkbox-row label {
    flex-grow: 1;
}

.p-sidebar-checkbox-row:hover,
.p-sidebar-checkbox-row:hover label {
    text-decoration: underline;
    color: var(--B400);
    cursor: pointer;
}

@media screen and (max-width: 1200px) {
    #p-menu-layout {
        grid-template-areas: "sidebar content";
        grid-template-columns: 1fr 3fr;
    }

    #p-menu-layout-header {
        grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs"
            "title title title"
            "search search search"
            "number sorting-by-label sorting-by";
        grid-template-columns: 1fr 1fr 2fr;
        gap: var(--small-gap);
    }
}

#p-menu-layout-sidebar-header {
    display: none;
}

#p-menu-layout-offer-code {
    display: none;
}

@media screen and (max-width: 900px) {
    #p-menu-layout {
        grid-template-areas: "content";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #p-menu-layout-sidebar {
        display: flex;
        grid-area: none;
        gap: var(--gap);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 80vw;
        height: 100vh;
        z-index: 1000;
        box-shadow: 1px 0px 15px hsl(0, 0%, 0%, 0.05);
        transform: translateX(-100vw);
        transition: transform var(--transition-duration);
    }

    #p-menu-layout-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--bigger-gap) var(--small-gap) var(--gap) var(--gap);
        border-bottom: solid 1px var(--N250);
        margin: calc(-1*var(--gap));
        background-color: var(--G100);
        margin-bottom: initial;
        color: var(--G400);
    }

    #p-menu-layout-close-sidebar {
        background: transparent;
        border-color: transparent;
    }

    #p-menu-layout-header {
        grid-template-areas: "offer offer"
            "breadcrumbs breadcrumbs"
            "title title"
            "button button"
            "tags tags"
            "number number"
            "sorting-by-label sorting-by";
        grid-template-columns: 1fr 2fr;
        padding: var(--gap);
    }

    #p-menu-layout-applied-flags {
        display: flex;
    }

    #p-menu-layout-open-sidebar {
        grid-area: button;
        width: fit-content;
        background-color: var(--N0);
        border: 1px solid var(--G400);
        color: var(--G400);
    }

    #p-menu-layout-offer-code {
        display: block !important;
    }

    #p-menu-sidebar-offer-code {
        display: none;
    }

    #p-menu-layout-offer-code {
        grid-area: offer;
    }

    #p-menu-layout-header-number {
        padding: 0;
    }

    #p-menu-layout-header-sorting-by-label {
        text-align: left;
    }


    #p-menu-layout-close-sidebar,
    #p-menu-layout-open-sidebar {
        display: block;
    }

    #p-menu-layout-content {
        max-height: unset;
    }

    #p-menu-layout-content-products {
        padding: var(--gap);
    }
}


@media screen and (max-width: 600px) {
    #p-menu-layout-content {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
}

.p-open {
    transform: translateX(0) !important;
}

/* Product Detail Layout */
#p-product-detail-layout {
    width: 100%;
    max-width: 75rem;
    margin-inline: auto;
    padding: var(--big-gap);
    display: grid;
    grid-template-areas: "breadcrumbs breadcrumbs ."
        "image header info"
        "image order info"
        "details details info";
    gap: var(--gap);
    grid-template-columns: auto 1fr auto;
}

#p-product-detail-breadcrumbs {
    grid-area: breadcrumbs;
}

.p-product-detail-image {
    grid-area: image;
    background-color: var(--N100);
}

#p-product-detail-header {
    grid-area: header;
}

#p-product-detail-description {
    grid-area: header;
}

#p-product-detail-highlights {
    grid-area: header;
    display: flex;
    flex-direction: column;
}

.p-product-detail-highlights-title {
    color: var(--G400);
}

.p-product-detail-highlights-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    padding-block: var(--small-gap);
}

.p-product-detail-highlights-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 4.5rem;
    overflow-x: visible
}

.p-product-detail-highlights-item * {
    text-align: center;
}

.p-product-detail-highlights-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--G50);
    width: var(--big-gap);
    height: var(--big-gap);
    color: var(--G400);
    border: 2px solid var(--G400);
    border-radius: 100%;
}

#p-product-detail-order {
    grid-area: order;
    display: grid;
    grid-template-areas: "warning warning"
        "stock-availability stock-availability"
        "code-price code-price"
        "order-form order-form";
    grid-template-columns: 1fr 3fr;
    padding: 0;
    margin: 0;
    max-width: 15rem;
    align-self: end;
}

#p-product-detail-order-warning {
    grid-area: warning;
    margin-bottom: var(--gap);
}

#p-product-detail-stock-availability-notes {
    grid-area: stock-availability;
    font-size: var(--small-font-size);
    display: flex;
    flex-direction: column;
    align-items: baseline;
    padding: var(--small-gap);
    background-color: var(--G100);
    border: 1px solid var(--G400);
    margin-bottom: var(--gap);
}

#p-product-detail-order-code-price {
    grid-area: code-price;
    margin-bottom: var(--gap);
}

#p-product-detail-order-form {
    grid-area: order-form;
}

#p-product-detail-order-form .p-product-box-add {
    padding: var(--gap) var(--big-gap);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}

#p-product-detail-order-add {
    grid-area: order-form;
}

#p-product-detail-details {
    grid-area: details;
}

#p-product-detail-info {
    grid-area: info;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}

#p-product-detail-info .p-icon {
    font-size: var(--h2-font-size);
    margin-bottom: var(--smaller-gap);
}

#p-free-standard-delivery,
#p-no-freezing-required {
    color: var(--N0);
    padding: var(--gap);
    border-radius: var(--small-gap);
    width: 11rem;
    height: 11rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#p-free-standard-delivery {
    background-color: var(--N400);
}

#p-no-freezing-required {
    background-color: var(--R250);
}

#p-product-detail-info small {
    margin: 0;
    padding: 0;
}

#p-product-detail-image-thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--gap);
    max-width: 27rem;
    overflow-x: scroll;
}

#p-product-detail-image-thumbnails.scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: var(--small-gap);
}

#p-product-detail-image-thumbnails.scrollable::-webkit-scrollbar-track {
    background-color: var(--N100);
}

#p-product-detail-image-thumbnails.scrollable::-webkit-scrollbar-thumb {
    background-color: var(--N250);
}

#p-product-detail-image-thumbnails.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--N400);
}

.p-inactive-thumbnail {
    opacity: 0.6;
    transition: opacity var(--transition-duration);
}

.p-inactive-thumbnail:hover {
    opacity: 0.9;
}

.p-active-thumbnail {
    opacity: 1;
    outline: 1px solid var(--G400);
    outline-offset: 2px;
    ;
}

@media screen and (max-width: 1600px) {
    #p-product-detail-info {
        flex-direction: column;
    }
}

@media screen and (max-width: 1200px) {
    #p-product-detail-layout {
        grid-template-areas: "breadcrumbs breadcrumbs"
            "image header"
            "image description"
            "image order"
            "info info"
            "details details";
    }

    #p-product-detail-info {
        flex-direction: row;
    }

    #p-free-standard-delivery,
    #p-no-freezing-required {
        width: unset;
        height: auto;
        flex: 1;
    }
}

@media screen and (max-width: 900px) {
    #p-product-detail-layout {
        grid-template-areas: "breadcrumbs"
            "header"
            "image"
            "description"
            "order"
            "info"
            "details";
        grid-template-columns: 1fr;
        gap: var(--gap);
    }

    #p-product-detail-layout>#p-product-detail-header {
        display: block;
    }

    #p-product-detail-description {
        grid-area: description;
    }

    #p-product-detail-order {
        width: 100%;
        max-width: none;
    }

    #p-product-detail-info {
        flex-direction: column;
    }
}

@media screen and (max-width: 600px) {
    #p-product-detail-layout {
        padding-inline: var(--gap);
    }

    #p-product-detail-info {
        flex-direction: column;
    }

    #p-product-detail-order-form .p-product-box-add,
    #p-product-detail-order-form .p-product-box-form-in-basket,
    #p-checkout-basket-sidebar-container #checkout-securely-button .p-button.p-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        border-radius: 0;
        padding: 1rem;
        margin: 0;
        width: 100%;
        z-index: 750;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    #p-product-detail-order-form .p-product-box-form-in-basket {
        background-color: var(--N0);
    }
}

/* Product Box */
.p-product-box {
    display: grid;
    gap: var(--small-gap);
    grid-template-areas: "image"
        "details"
        "code-price"
        "form";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: opacity var(--transition-duration);
}

.p-product-box-hidden {
    display: none;
    opacity: 0;
}

.p-product-box-image-link {
    aspect-ratio: 1;
    background-color: var(--N100);
    grid-area: image;
}

.p-product-box-image-link img {
    object-fit: cover;
    background-color: var(--N100);
    width: 100%;
    height: auto;
}

.p-product-box-details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 0 calc(-1 * var(--small-gap)) 0;
}

.p-product-box-title {
    /* grid-area: title; */
    padding: 0;
    margin: 0;
    text-wrap: balance;
}

.p-product-box-title a {
    color: var(--G400);
    text-decoration: none;
}

.p-product-box-title a:hover {
    color: var(--G300);
    text-decoration: underline;
}

.p-product-box-portion-size {
    color: var(--N400);
    font-family: var(--header-font);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: var(--small-gap);
}

.p-product-box-desc {
    /* grid-area: desc; */
    margin: 0;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    flex: 1;
}

.p-product-box-desc p {
    padding: 0;
    margin: 0;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-product-box-code-price,
#p-product-detail-order-code-price {
    grid-area: code-price;
    background-color: var(--N0);
    border: 1px solid var(--G400);
    display: flex;
    flex-direction: row;
}

.p-product-box-code-price-in-basket {
    grid-area: none !important;
    margin-block: var(--small-gap);
}

.p-product-box-plus-minus {
    grid-area: plus-minus;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    padding-block: 1px;
}

.p-product-box-plus-minus input {
    text-align: center;
    width: 10%;
    flex-grow: 1;
}

.p-product-box-plus-minus .remove {
    color: var(--R400);
}

.p-product-box-form {
    grid-area: form;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

.p-product-box-form button {
    flex-grow: 1;
}

.p-product-box-form-in-basket {
    grid-area: form;
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}


.p-product-box-code-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--G100);
    border-right: 1px solid var(--G400);
}

.p-product-box-code,
#p-product-detail-order-code {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: var(--N600);
    padding: 0.5rem 0.8rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--semi-bold);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

#p-product-detail-order-code {
    background-color: var(--G100);
    border-right: 1px solid var(--G400);
}

.p-product-box-price,
#p-product-detail-order-price {
    flex-grow: 1;
    text-align: center;
    padding: var(--input-padding);
    text-transform: uppercase;
    font-weight: var(--semi-bold);
    color: var(--G400);
}

.p-product-box-discount,
.p-product-detail-order-discount,
.p-basket-item-discount {
    font-size: var(--small-font-size);
    color: var(--N600);
    text-decoration: line-through;
}

.p-product-box-price-old,
#p-product-detail-order-price-old {
    color: var(--N600);
    text-decoration: line-through;
}

.p-product-box-promotional,
.p-product-detail-order-promotional,
.p-basket-item-promotional {
    color: var(--R400);
}

.p-product-box-qty {
    grid-area: qty;
    width: 4rem;
}

.p-product-box-add {
    grid-area: add;
    height: fit-content;
    align-self: end;
}

.p-product-box-disabled {
    grid-area: add;
}

@media screen and (max-width: 600px) {
    .p-product-box {
        grid-template-areas: "image details"
            "image details"
            "code-price form";
        grid-template-columns: clamp(6rem, 40vw, 9rem) 1fr;
        grid-template-rows: 1fr auto auto;
        width: auto;
    }

    .p-product-box-title {
        font-size: var(--base-font-size);
        line-height: var(--base-line-height);
    }

    .p-product-box-portion-size {
        font-size: 0.7rem;
        line-height: 0.8rem;
    }

    .p-product-box-code {
        padding: 0.4rem;
    }

    .p-product-box-price {
        padding: 0.4rem;
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
    }

    .p-product-box-code-code {
        display: none;
    }

    .p-product-box-qty {
        display: none;
        grid-area: none;
    }
}

/* Posing User */
.p-posing-alert {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    width: 100%;
    padding: var(--small-gap);
    color: black;
    background: var(--G100);
    border-top: 1px solid var(--G400);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--big-gap);
}

.p-posing-alert>span {
    text-align: right;
}

@media screen and (max-width: 900px) {
    .p-posing-alert {
        flex-direction: column;
        gap: var(--gap);
    }

    .p-posing-alert>span {
        text-align: center;
    }
}

.p-sidebar-details {
    border-bottom: none;
}

.p-sidebar-summary {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: var(--regular);
    cursor: pointer;
}

.p-sidebar-details[open] .p-sidebar-summary {
    margin-bottom: var(--gap);
}

.p-sidebar-details-content {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.p-sidebar-details-content div {
    padding-bottom: 0;
}

.p-sidebar-summary .p-icon {
    font-size: var(--h6-font-size);
}

.p-shipments {
    display: flex;
    flex-direction: column;
}

.p-shipment {
    display: grid;
    grid-template-areas: "number reorder-button reorder-button"
        "details view-button invoice-button"
        "delivery delivery delivery"
        "tracking tracking tracking";
    grid-template-columns: 3fr 1fr 1fr;
    gap: var(--small-gap);
    padding: var(--gap);
    border-top: 1px solid var(--N100);
    border-left: 1px solid var(--N100);
    border-right: 1px solid var(--N100);
}

.p-shipment:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.p-shipment:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-bottom: 1px solid var(--N100);
}

.p-shipment-number {
    padding-top: 0.4rem;
    grid-area: number;
}

.p-shipment-details {
    grid-area: details;
}

.p-shipment-view-button {
    grid-area: view-button;
}

.p-shipment-invoice-button {
    grid-area: invoice-button;
}

.p-shipment-reorder-button {
    grid-area: reorder-button;
}

.p-shipment-delivery {
    grid-area: delivery;
}

.p-shipment-tracking {
    grid-area: tracking;
}

.p-shipment-tracking-none {
    display: block;
}

.p-shipment-tracking td,
.p-shipment-tracking th {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

@media screen and (max-width: 900px) {
    .p-shipment {
        display: grid;
        grid-template-areas: "number number"
            "details details"
            "delivery delivery"
            "reorder-button reorder-button"
            "view-button invoice-button"
            "tracking tracking";
        grid-template-columns: 1fr 1fr;
        padding: var(--gap);
    }
}

.p-preferences-row-container {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-preferences-row {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    align-items: center;
}

.p-preferences-row .p-icon {
    color: var(--G400);
}

.p-member-details {
    --label-width: 6rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap) var(--big-gap);
}

.p-member-details .p-form-row label {
    text-align: left;
}

@media screen and (max-width: 900px) {
    .p-member-details {
        grid-template-columns: 1fr;
        gap: var(--gap);
    }
}

.p-email-row {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    align-items: baseline;
    flex-wrap: wrap;
}

.p-email-row label {
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    flex-grow: 1;
}

.p-email-row button {
    display: block;
}

.p-messages {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-message {
    display: flex;
    flex-direction: row;
    padding: var(--gap);
    gap: var(--gap);
    border: 1px solid var(--G400);
    background-color: var(--G100);
    border-radius: var(--border-radius);
    align-items: baseline;
}

.p-message button {
    background-color: var(--N0);
}

.p-message span {
    flex-grow: 1;
}

.p-member-details a {
    text-decoration: underline;
    cursor: pointer;
}

.p-member-details a.p-quiet-link {
    color: var(--N600);
    text-decoration: none;
}

.p-member-details a.p-quiet-link:hover {
    text-decoration: underline;
    color: var(--B400);
}

.p-refer-faq,
.p-refer-signups {
    margin-top: var(--big-gap);
}

.p-refer-code {
    text-transform: uppercase;
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    padding: var(--input-padding);
    border-radius: var(--border-radius);
    background-color: var(--G100);
    border: 1px solid var(--G400);
}

.p-refer-share {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}

.p-refer-share .share {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--small-gap);
}

.p-refer-share .share .options {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--small-gap);
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}


.p-refer-social {
    border-radius: var(--rounded);
    width: 1.5rem;
    height: 1.5rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    text-decoration: none;
    font-size: 0;
    color: var(--N0);
    display: inline-block;
}

.p-refer-facebook {
    background-color: hsl(208, 67%, 41%);
    background-image: url(/static/dist/507ff3219bb3022110c1.png);
    background-size: 9px 18px;
}

.p-refer-twitter {
    background-color: hsl(196, 100%, 45%);
    background-image: url(/static/dist/c4a9a0133b326898983f.png);
    background-size: 18px 15px;
}

.p-refer-signup {
    list-style: none;
    margin-left: 0;
}

.p-refer-signup::before {
    content: "\2713\0020";
    color: var(--G400);
}

.p-membership-benefits {
    border: 1px solid var(--N100);
    border-radius: var(--border-radius);
    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--gap);
    margin-bottom: var(--big-gap);
}

.p-membership-benefit {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.p-membership-benefit h3 {
    flex-grow: 1;
    padding: 0;
    margin: 0;
}

.p-membership-benefit h3 a {
    color: var(--G400);
    text-decoration: none;
}

.p-membership-benefit h3 a:hover {
    text-decoration: underline;
}

.p-delivery-address {
    padding: var(--gap);
    border-top: 1px solid var(--N100);
    border-left: 1px solid var(--N100);
    border-right: 1px solid var(--N100);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.p-delivery-address:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.p-delivery-address:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-bottom: 1px solid var(--N100);
}

.p-delivery-address-buttons {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    align-items: center;
}

@media screen and (max-width: 900px) {
    .p-delivery-address {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap);
        justify-content: unset;
    }
}

.address-finder-container {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    align-items: baseline;
}

.manually-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.address-finder .manually-container {
    display: none;
}

.manually .address-finder-container {
    display: none;
}

.complete-address {
    list-style: none;
    padding: 0 0 0 calc(var(--label-width) + var(--small-gap));
}

.p-order-summary {
    padding: 0.5em;
    margin-top: 0.5em;
    border: 1px solid var(--N100);
}

.p-order-summary h5 {
    margin-bottom: 0;
}

.p-order-summary-header {
    display: flex;
    flex-wrap: wrap-reverse;
}

.p-order-summary-info {
    flex: auto;
    padding-bottom: 0;
}

.p-order-summary-actions {
    display: flex;
    flex: auto;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-order-summary-table td {
    border-top: 0 solid var(--N100);
    border-bottom: 0 solid var(--N100);
    border-left: none;
    border-right: none;
    padding-block: 0.5em;
    text-align: left;
}

.p-order-summary-table {
    border-top: 1px solid var(--N100);
    width: 100%;
}

.p-order-summary-code {
    color: var(--N600);
    padding: var(--smaller-gap);
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--semi-bold);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    background-color: var(--G100);
    border: 1px solid var(--G400);
}

@media screen and (max-width: 900px) {
    .p-order-summary-code-label {
        display: none;
    }

    .p-order-summary-table-thumbnail {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media screen {
    #p-print-footer {
        display: none;
    }
}

@media print {

    #p-header,
    .p-footer,
    #onetrust-consent-sdk,
    .p-print-hidden {
        display: none;
    }

    #p-sidebar-layout-sidebar {
        display: none;
    }

    #p-sidebar-layout-content {
        grid-area: none;
        width: 100%;
    }

    .p-single-column-layout-content {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    #p-print-footer {
        display: block;
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        margin-top: var(--big-gap);
    }
}

.p-banner {
    --banner-icon-color: var(--N400);
    --banner-background-color: var(--N100);
    --banner-border-color: var(--N400);
    width: auto;
    max-width: 75rem;
    border: 1px solid var(--banner-border-color);
    border-radius: var(--border-radius);
    background-color: var(--banner-background-color);
    padding: var(--input-padding);
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    align-items: center;
    margin-block: var(--small-gap);
    margin-inline: auto;
    justify-content: space-between;
}

@media screen and (max-width: 1500px) {
    .p-banner {
        margin-inline: var(--small-gap);
    }
}

.p-banner-message {
    position: relative;
    z-index: 9999;
}

form>.p-banner {
    margin: 0;
}

.p-banner span {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    flex: 1;
}

.p-banner-icon {
    color: var(--banner-icon-color);
}

.p-banner .p-button,
.p-banner button {
    background-color: var(--N0);
    border: 1px solid var(--banner-border-color);
}

.p-banner-hidden {
    display: none !important;
}

.p-banner.p-banner-alert {
    padding: var(--gap);
    margin-block: unset;
}

.p-alert-info {
    --banner-icon-color: var(--B400);
    --banner-background-color: var(--B100);
    --banner-border-color: var(--B400);
    color: var(--B400);
}

.p-alert-warning {
    --banner-icon-color: var(--N600);
    --banner-background-color: var(--Y400);
    --banner-border-color: var(--N0);
    color: var(--N600);
}

.p-alert-success {
    --banner-icon-color: var(--N0);
    --banner-background-color: var(--G400);
    --banner-border-color: var(--N0);
    color: var(--N0);
}

.p-alert-danger {
    --banner-icon-color: var(--N0);
    --banner-background-color: var(--R400);
    --banner-border-color: var(--N0);
    color: var(--N0);
}

.p-banner-alert button.close {
    color: inherit;
    background-color: inherit;
    padding: 0.2rem 0.4rem;
    font-size: larger;
    border: none;
}

.p-banner-alert a {
    color: inherit;
    text-decoration: none;
}

.p-banner-alert a:hover {
    text-decoration: underline;
}

/* Use icon fa-circle-info */
.p-information,
.p-info {
    --banner-icon-color: var(--B400);
    --banner-background-color: var(--B100);
    --banner-border-color: var(--B400);
}

/* Use icon fa-triangle-exclamation */
.p-warning {
    --banner-icon-color: var(--Y400);
    --banner-background-color: var(--Y100);
    --banner-border-color: var(--Y400);
}

/* Use icon fa-check */
.p-success {
    --banner-icon-color: var(--G400);
    --banner-background-color: var(--G100);
    --banner-border-color: var(--G400);
}

/* Use icon fa-ticket */
.p-voucher {
    --banner-icon-color: var(--P400);
    --banner-background-color: var(--P100);
    --banner-border-color: var(--P400);
}

/* Use icon fa-triangle-exclamation */
.p-danger {
    --banner-icon-color: var(--R400);
    --banner-background-color: var(--R100);
    --banner-border-color: var(--R400);
}

/* Use icon fa-ban */
.p-error {
    --banner-icon-color: var(--R400);
    --banner-background-color: var(--R100);
    --banner-border-color: var(--R400);
}

.p-user-benefits {
    display: grid;
    gap: var(--big-gap);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    padding: var(--big-gap);
    border: 1px solid var(--N100);
    border-radius: var(--border-radius);
}

.p-user-benefit {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-user-benefit h3,
.p-user-benefit p {
    margin: 0;
    padding: 0;
}

.p-user-benefit-expiry {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    text-transform: uppercase;
    color: var(--N600);
}

.p-delivery-tracking-details {
    border: none;
}


.p-delivery-tracking-details summary {
    padding: 0;
    font-weight: var(--regular);
    font-family: var(--body-font);
}

.p-delivery-tracking-details[open] summary {
    padding-bottom: var(--gap);
}

details .p-summary-hide {
    display: none;
}

details[open] .p-summary-show {
    display: none;
}

details[open] .p-summary-hide {
    display: inline-block;
}

dl {
    padding-bottom: var(--gap);
}

.p-share-facebook {
    background-color: hsl(208, 67%, 41%);
    color: var(--N0);
}

.p-share-facebook:hover {
    background-color: hsl(208, 67%, 51%);
    border-color: hsl(208, 67%, 51%);
    ;
    color: var(--N0);
}

.p-share-twitter {
    background-color: hsl(196, 100%, 45%);
    color: var(--N0);
}

.p-share-twitter:hover {
    background-color: hsl(196, 100%, 55%);
    border-color: hsl(196, 100%, 55%);
    color: var(--N0);
}

.p-share-twitter svg,
.p-share-facebook svg,
.p-share-sms svg,
.p-share-email svg {
    margin-right: var(--smallest-gap);
}

.p-member-section {
    margin-bottom: var(--massive-gap);
}

.p-member-section:last-child {
    margin-bottom: none;
}

.p-error-message {
    color: var(--R400);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-thanks-page-header {
    padding-block: var(--big-gap);
    max-width: 75rem;
    margin-inline: auto;
    text-align: center;
}

.p-thanks-page-header p {
    margin: 0 0 var(--small-gap) 0;
    padding: 0;
}

.p-thanks-page-header p strong {
    font-weight: var(--semi-bold);
}

.p-thanks-page-header .p-button {
    display: initial;
}

.p-thanks-page-container {
    background-color: var(--N50);
    border-top: 1px solid var(--N100);
    padding: var(--big-gap);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 36rem));
    justify-content: center;
    gap: var(--big-gap);
}

.p-thanks-page-section {
    padding: var(--big-gap);
    background-color: var(--N0);
    border-radius: var(--border-radius);
    border: 1px solid var(--N100);
}

@media screen and (max-width: 600px) {
    .p-thanks-page-container {
        padding: 0;
    }

    .p-thanks-page-section {
        border-radius: 0;
    }
}

.p-login-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--smallest-gap);
}

.p-login-form-row>label {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-login-form-row:focus-within>label {
    color: var(--B400);
}

.p-login-form-row-group {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

.p-login-form-row-group .p-login-form-row {
    flex-grow: 1;
}

@media screen and (max-width: 600px) {
    .p-login-form-row-group {
        flex-direction: column;
        gap: var(--big-gap);
    }

    .p-login-form-row select {
        width: 100%;
    }
}

.p-check-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
    padding-top: calc(var(--small-gap) - var(--smallest-gap));
}

.p-check-radio-group label:hover,
.p-check-radio-group-horizontal label:hover {
    color: var(--B400);
}

.p-check-radio-group-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--small-gap);
    padding-top: calc(var(--small-gap) - var(--smallest-gap));
}

.p-check-radio-group-row {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

@media screen and (min-width: 601px) {

    .p-check-radio-group-horizontal .p-check-radio-group-row {
        padding: var(--input-padding);
        border: 1px solid var(--N250);
        border-radius: var(--border-radius);
    }

    .p-check-radio-group-horizontal .p-check-radio-group-row:focus-within {
        border: 1px solid var(--B400);
    }

    .p-check-radio-group-horizontal .p-check-radio-group-row label {
        flex-grow: 1;
        margin: -0.4rem -0.8rem -0.4rem calc(-0.8rem - (var(--small-gap) + var(--check-radio-size)));
        padding: 0.4rem 0.8rem 0.4rem calc(0.8rem + (var(--small-gap) + var(--check-radio-size)));
    }
}


@media screen and (max-width: 600px) {
    .p-check-radio-group-horizontal {
        display: flex;
        flex-direction: column;
        flex-wrap: none;
    }
}

.p-error-message {
    color: var(--R400);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

input.p-field-error,
select.p-field-error,
textarea.p-field-error {
    border: 1px solid var(--R400);
}

.form-password-container {
    display: flex;
    flex-direction: row;
}

.form-password-container input {
    flex: 1;
}

.form-password-container button {
    --show-password-button-width: 3rem;
    background-color: transparent;
    border-color: transparent;
    width: var(--show-password-button-width);
    margin-left: calc(0px - var(--show-password-button-width));
    padding-inline: 0;
}

.p-text-divider {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    align-items: center;
    text-transform: uppercase;
    font-family: var(--header-font);
    padding-block: var(--gap);
}

.p-text-divider::before,
.p-text-divider::after {
    content: '';
    height: 1px;
    background-color: var(--N250);
    flex-grow: 1;
}

.p-login-form-row.remember,
.p-login-form-row.email_marketing,
.p-login-form-row.text_marketing {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    flex-wrap: wrap;
    gap: var(--small-gap);
    align-items: center;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-login-form-row.remember label:hover {
    color: var(--B400);
}

.p-login-form-row.p-form-link {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-progress-bar-container {
    background-color: var(--N50);
    border-radius: var(--rounded);
    width: 100%;
    height: var(--progress-bar-height);
    padding: 0;
    margin: 0;
}

.p-progress-bar-0 {
    background-color: var(--R400);
    border-radius: var(--rounded);
    display: block;
    width: var(--progress-bar-height);
    height: var(--progress-bar-height);
}

.p-progress-bar-25 {
    background-color: var(--R400);
    border-radius: var(--rounded);
    display: block;
    width: 25%;
    height: var(--progress-bar-height);
}

.p-progress-bar-50 {
    background-color: var(--Y400);
    border-radius: var(--rounded);
    display: block;
    width: 50%;
    height: var(--progress-bar-height);
}

.p-progress-bar-75 {
    background-color: var(--G400);
    border-radius: var(--rounded);
    display: block;
    width: 75%;
    height: var(--progress-bar-height);
}

.p-progress-bar-100 {
    background-color: var(--G400);
    border-radius: var(--rounded);
    display: block;
    width: 100%;
    height: var(--progress-bar-height);
}

.p-password-feedback {
    display: flex;
    flex-direction: column;
    gap: var(--smallest-gap);
}

.p-password-feedback-strength {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    font-weight: var(--bold);
}

.p-field-guidance {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    color: var(--N350);
    display: block;
    margin: 0;
    padding: 0;
}

.p-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    background-color: var(--N0);
    border-radius: var(--border-radius);
}

.p-tab {
    flex: 1;
    text-align: center;
    border-radius: 0;
    padding: var(--input-padding);
}

.p-tab:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.p-tab:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.p-tab-selected {
    color: var(--G400);
    border-bottom: 1px solid var(--G400);
}

address {
    display: flex;
    flex-direction: column;
    gap: var(--smallest-gap);
    font-style: normal;
}

address>span {
    display: block;
}

.p-hidden {
    display: none !important;
}

@media screen and (max-width: 600px) {
    .p-hidden-on-mobile {
        display: none !important;
    }
}

.p-header-image {
    --header-image: url(/static/dist/de9a416c73be20d764ad.jpg);
    width: 100%;
    height: var(--header-image-height);
    background-size: cover;
    background-image: var(--header-image);
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.p-header-image-container {
    width: 100%;
    max-width: 75rem;
    margin: auto;
    text-align: -moz-right;
}

.p-header-image-content {
    width: min(100%, 19rem);
    padding: var(--gap);
    background-color: hsl(0, 0%, 100%, 80%);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius) var(--border-radius);
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 900px) {
    .p-header-image {
        flex-direction: row;
        justify-content: center;
    }

    .p-header-image-content {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
}

/*
Homepage - Promotions
*/

.p-homepage-container {
    display: flex;
    flex-direction: column;
    gap: var(--big-gap);
    padding: var(--big-gap);
}

.p-homepage-container>h2 {
    text-align: center;
    margin: 0;
}

.p-homepage-promotions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--big-gap);
    max-width: 75rem;
    margin: auto;
}

.p-homepage-promotion {
    --promotion-width: 20rem;
    display: grid;
    grid-template-areas: "title"
        "promotion_image"
        "description"
        "promotion_button";
    grid-template-columns: 1fr;
    max-width: var(--promotion-width);
    gap: var(--gap);
    grid-template-rows: auto auto 1fr auto;
}

.p-homepage-promotion-image {
    grid-area: promotion_image;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    overflow: hidden;
}

.p-homepage-promotion-title {
    grid-area: title;
    margin-block: 0px;
    text-align: center;
}

.p-homepage-promotion-description {
    grid-area: description;
    text-align: center;
}

.p-homepage-promotion-description p:last-child {
    margin-bottom: 0;
}

.p-homepage-promotion-button {
    grid-area: promotion_button;
}

@media screen and (max-width: 600px) {
    .p-homepage-promotion-button {
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        padding: var(--input-padding);
    }
}

/*
    Homepage - Three Points
*/

.p-three-points {
    display: flex;
    padding: var(--bigger-gap);
    background-color: var(--G400);
    color: var(--N0);
    gap: var(--big-gap);
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.p-three-point {
    flex: 1;
    max-width: 19rem;
    min-width: min(100%, 12rem);
}

.p-three-point p:last-child {
    margin-bottom: 0;
}

.p-three-points img {
    width: min(100%, 10rem);
}

@media screen and (max-width: 600px) {
    .p-three-points {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
}

.p-homepage-hero {
    background-color: var(--N0);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: var(--bigger-gap) min-content var(--bigger-gap);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.p-homepage-hero-img-container {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    background-color: var(--G100);
    display: flex;
}

.p-homepage-hero-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1200px) {
    .p-homepage-hero-img {
        max-height: 25rem;
    }
}

.p-homepage-hero-container {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    max-width: 75rem;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.p-homepage-hero-content {
    width: min(100%, 35rem);
    padding: var(--bigger-gap);
    background-color: var(--N0);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.p-homepage-hero-content h1 {
    padding: 0;
    margin: 0;
}

.p-homepage-hero-content p {
    padding: 0;
    margin: 0;
}

.p-homepage-hero-button-row {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    align-items: center;
}

.p-homepage-hero-button-row>* {
    flex: 1;
}

@media screen and (max-width: 600px) {
    .p-homepage-hero-content {
        width: 100%;
        border-radius: 0;
        padding: var(--gap);
    }

    .p-homepage-hero-content h1 {
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
    }

    .p-homepage-hero-button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .p-homepage-hero-catalogue-button {
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        padding: 0.6rem 1rem;
    }
}

.p-text-roundel,
.p-image-roundel {
    --roundel-background-color: var(--G400);
    --roundel-text-color: var(--N0);
    --roundel-size: 30%;
    --roundel-margin: var(--smallest-gap);
    --roundel-font-size: var(--small-font-size);
    position: relative;
    width: var(--roundel-size);
    aspect-ratio: 1;
    z-index: 500;
}

.p-text-roundel {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--smallest-gap);
    font-size: var(--roundel-font-size);
    line-height: var(--roundel-font-size);
    border: 2px solid var(--N0);
    box-shadow: 0px 1px 5px hsl(0, 0%, 0%, 0.2);
    text-decoration-color: var(--roundel-background-color);
    font-family: var(--header-font);
    border-radius: var(--rounded);
    color: var(--roundel-text-color);
    background-color: var(--roundel-background-color);
}

.p-product-box .p-text-roundel,
.p-product-box .p-image-roundel {
    grid-area: image;
}

.p-product-detail-roundel {
    --roundel-size: 5rem;
    --roundel-font-size: var(--base-font-size);
    grid-area: image;
}

@media screen and (max-width: 600px) {

    .p-product-box .p-text-roundel,
    .p-product-box .p-image-roundel {
        --roundel-size: 3.3rem;
        --roundel-font-size: 0.7rem;
    }
}

@media screen and (max-width: 300px) {

    .p-text-roundel,
    .p-image-roundel {
        display: none;
    }
}

.p-roundel-top-left,
.p-roundel-top-center,
.p-roundel-top-right {
    margin-top: var(--roundel-margin);
}

.p-roundel-middle-left,
.p-roundel-middle-center,
.p-roundel-middle-right {
    --max-half-width: min(13.5rem, 50%);
    margin-top: calc(var(--max-half-width) - calc(var(--roundel-size) / 2));
}

.p-roundel-bottom-left,
.p-roundel-bottom-center,
.p-roundel-bottom-right {
    --max-image-width: min(27rem, 100%);
    margin-top: calc(var(--max-image-width) - calc(var(--roundel-size) + var(--roundel-margin)));
}

.p-roundel-top-left,
.p-roundel-middle-left,
.p-roundel-bottom-left {
    margin-left: var(--roundel-margin);
}

.p-roundel-top-center,
.p-roundel-middle-center,
.p-roundel-bottom-center {
    --max-half-width: min(13.5rem, 50%);
    margin-left: calc(var(--max-half-width) - calc(var(--roundel-size) / 2));
}

.p-roundel-top-right,
.p-roundel-middle-right,
.p-roundel-bottom-right {
    --max-image-width: min(27rem, 100%);
    margin-left: calc(var(--max-image-width) - calc(var(--roundel-size) + var(--roundel-margin)));
}

.p-suggestions-list {
    display: flex;
    flex-direction: row;
    gap: var(--big-gap);
    margin-block: var(--big-gap);
    flex-wrap: wrap;
}

.p-suggestions-list .p-product-box {
    flex: 1;
}

@media screen and (max-width: 600px) {
    .p-suggestions-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

.p-range-buttons {
    display: flex;
    flex-direction: row;
    gap: 1px;
}

.p-range-buttons input[type="radio"] {
    display: none;
}

.p-range-button {
    flex: 1;
    border-radius: 0;
    padding-inline: 0.4rem;
}

.p-range-button:hover {
    color: var(--B400);
}

input:first-child+.p-range-button {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.p-range-button:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.p-range-buttons input:checked+.p-range-button {
    border-color: var(--G400);
    background-color: var(--N0);
    color: var(--G400);
}

.p-range-labels {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.p-range-end-desktop {
    display: block;
    text-align: right;
}

.p-range-end-mobile {
    display: none;
}

@media screen and (max-width: 600px) {
    .p-range-buttons {
        flex-direction: column;
    }

    input:first-child+.p-range-button {
        border-top-right-radius: var(--border-radius);
        border-bottom-left-radius: 0;
    }

    .p-range-button:last-child {
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--border-radius);
    }

    .p-range-end-desktop {
        display: none;
    }

    .p-range-end-mobile {
        display: block;
    }
}

.p-survey-page-layout {
    padding: var(--big-gap);
    background-color: var(--N100);
}

.p-survey-page-layout-content {
    width: min(40rem, 100%);
    margin-inline: auto;
    margin-top: -4.5rem;
}

@media screen and (max-width: 600px) {
    .p-survey-page-layout {
        padding: 0rem;
    }

    .p-survey-page-layout-content {
        margin-top: 0rem;
    }

    .p-survey-submit {
        margin-inline: var(--big-gap);
    }
}

/* RECOMMENDATIONS */
.p-basket-recommendations-container {
padding: var(--big-gap);
margin-top: var(--gap);
margin-inline: calc(0px - var(--big-gap));
margin-bottom: calc(0px - var(--big-gap));
border-radius: 0px 0px var(--border-radius) var(--border-radius);
background-color: var(--G100);
display: flex;
flex-direction: column;
gap: var(--big-gap);
}
.p-basket-recommendations-header {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.p-basket-recommendations-row {
display: flex;
flex-direction: row;
gap: var(--big-gap);
justify-content: center;
flex-wrap: wrap;
}
.p-basket-recommendations-row > .p-product-box {
max-width: 12.5rem;
}
@media screen and (max-width: 600px){
.p-basket-recommendations-container {
    padding: var(--gap);
    border-radius: 0px;
    flex-direction: column;
    gap: var(--gap);
    margin: 0;
    margin-inline: calc(0px - var(--gap));
    margin-bottom: calc(0px - var(--gap));
}
.p-basket-recommendations-row {
flex-direction: column;
}
.p-basket-recommendations-row > .p-product-box {
max-width: unset;
}
}

.p-basket-layout {
    padding: var(--big-gap);
    background-color: var(--N100);
}

.p-basket {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: min(100%, 60rem);
    margin-inline: auto;
}

@media screen and (max-width: 600px) {
    .p-basket-layout {
        padding: 0;
    }

    .p-basket {
        padding: var(--gap);
    }
}

.p-basket-title {
    margin: 0;
    padding: 0;
}

.p-basket-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--gap);
}

@media screen and (max-width: 900px) {
    .p-basket-buttons {
        flex-direction: column-reverse;
        gap: var(--gap);
    }

}

.p-basket-item-qty {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--N250);
    border-radius: var(--border-radius);
    grid-area: quantity;
}

.p-basket-item-qty:hover {
    border: 1px solid var(--N500);
}

.p-basket-item-qty:focus-within {
    border: 1px solid var(--B400);
}

.p-basket-item-qty-minus {
    --button-color: var(--N0);
    border: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    box-shadow: none;
}

.p-basket-item-qty-input {
    background-color: var(--N0);
    border: none;
    width: 100%;
    flex: 1;
    border-radius: 0;
    text-align: center;
    padding: 0.4rem 0;
}

.p-basket-item-qty-input::-webkit-inner-spin-button,
.p-basket-item-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.p-basket-item-qty-input:hover {
    border: none;
}

.p-basket-item-qty-input:focus {
    border: none;
}

.p-basket-item-qty-plus {
    --button-color: var(--N0);
    border: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    box-shadow: none;
}

.p-basket-item-qty-plus:focus,
.p-basket-item-qty-minus:focus {
    outline: none;
    color: var(--B400);
}

.p-basket-item-cp {
    border: 1px solid var(--G400);
    font-size: var(--small-font-size);
    display: flex;
    flex-direction: row;
    background-color: var(--N0);
    font-weight: var(--semi-bold);
    text-align: center;
    line-height: var(--small-line-height);
    grid-area: code-price;
}

.p-basket-item-cp-code {
    background-color: var(--G100);
    border-right: 1px solid var(--G400);
    padding: 0.4rem;
}

.p-basket-item-cp-price {
    padding: 0.4rem var(--big-gap);
    text-align: center;
    flex-grow: 1;
    color: var(--G400);
    font-size: var(--base-font-size);
}

@media screen and (max-width: 1200px) {
    .p-basket-item-cp-price {
        padding: 0.4rem var(--gap);
    }
}

.p-order-calculation {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.p-order-calculation-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: var(--header-font);
    font-size: var(--h4-font-size);
    line-height: var(--h3-line-height);
}

.p-basket .p-banner {
    margin-block: 0;
}

.block-table {
    max-width: calc(100vw - (2 * var(--big-gap)));
    overflow-x: auto;
}

hr {
    border-top: 1px solid var(--N250);
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-block: var(--small-gap);
}

.p-wagtail-image-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.p-wagtail-image-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.p-wagtail-image-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.p-wagtail-image-stretch {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.p-wagtail-image-stretch img {
    flex: 1;
}

.p-basket-user-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* Alpine */
[x-cloak] {
    display: none !important;
}


/* Checkout */
#p-checkout-header {
    display: flex;
    flex-direction: row;
    max-width: 75rem;
    margin-inline: auto;
    padding: var(--gap) var(--big-gap);
    align-items: center;
    justify-content: space-between;
    background-color: var(--N0);
}

#p-checkout-header-logo img {
    max-height: 4rem;
}

#p-checkout-header-account-links {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

#p-checkout-header-account-links a {
    color: var(--N600);
    text-decoration: none;
}

#p-checkout-compliance {
    width: 100%;
}

#p-checkout-compliance img {
    margin-inline: auto;
}

@media screen and (max-width: 900px) {
    #p-checkout-header {
        padding: var(--gap);
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 2rem 3rem;
        grid-template-areas: "logo account"
            "progress progress";
    }

    #p-checkout-header-logo {
        grid-area: logo;
    }

    #p-checkout-header-logo img {
        max-height: 2rem;
    }

    #p-checkout-header-account-links {
        grid-area: account;
        text-align: right;
    }

    #p-checkout-header .p-progress {
        grid-area: progress;
        max-width: unset;
        margin-inline: calc(0px - var(--gap));
    }
}

.p-progress {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
    max-width: 25rem;
}

.p-progress-step {
    text-align: center;
    position: relative;
    width: 100%;
}

.p-progress-step:before,
.p-progress-step:after {
    content: "";
    height: 2px;
    background-color: var(--N350);
    position: absolute;
    z-index: 1;
    width: 100%;
    left: -50%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.25s ease-out;
}

.p-progress-step:first-child:before,
.p-progress-step:first-child:after {
    display: none;
}

.p-progress-step:after {
    background-color: var(--G400);
    width: 0%;
}

.p-progress-complete+.p-progress-current:after,
.p-progress-complete+.p-progress-complete:after {
    width: 100%;
}

.p-progress-marker {
    --progress-marker-size: 1rem;
    width: var(--progress-marker-size);
    height: var(--progress-marker-size);
    background-color: var(--G400);
    border-radius: 50%;
    max-width: 100%;
    z-index: 10;
    position: absolute;
    left: calc(50% - (var(--progress-marker-size)/2));
    top: calc(0px - (var(--progress-marker-size)/2));
}

.p-progress-complete .p-progress-marker {
    background-color: var(--N0);
    color: var(--G400);
}

.p-progress-complete .p-progress-marker * {
    vertical-align: 0 !important;
}

.p-progress-current .p-progress-marker {
    --progress-marker-size: 1.2rem;
}

.p-progress-future .p-progress-marker {
    background-color: var(--N0);
    border: 2px solid var(--N350);
}

.p-progress-label {
    font-size: var(--small-font-size);
    display: block;
    position: absolute;
    padding-top: 0.8rem;
    width: 100%;
}

.p-progress-future .p-progress-label {
    color: var(--N350);
}

.p-progress-current .p-progress-label {
    color: var(--G400);
    font-weight: var(--semi-bold);
}


#p-checkout-main {
    min-height: 60vh;
    background-color: var(--N100);
    padding: var(--big-gap);
    border-top: 1px solid var(--N250);
    display: grid;
    grid-template-columns: 1fr 28rem 21rem 1fr;
    gap: var(--gap);
    grid-template-areas: ". content sidebar .";
}

#p-recommendation-main {
    min-height: 60vh;
    background-color: var(--N100);
    padding: var(--big-gap);
    border-top: 1px solid var(--N250);
    display: grid;
    grid-template-columns: minmax(auto, 54rem) 21rem;
    gap: var(--gap);
    grid-template-areas: "content sidebar";
    justify-content: center;
}

#p-checkout-banner {
    grid-area: banner;
    text-align: center;
    margin: 0;
}

#p-checkout-content {
    grid-area: content;
}

.p-checkout-content-header {
    color: var(--G400);
}

.p-breadcrumb-current {
    font-weight: var(--semi-bold);
}

.p-breadcrumb-future {
    color: var(--N350);
}

#p-checkout-sidebar {
    grid-area: sidebar;
}

@media screen and (max-width: 1200px) {

    #p-checkout-main,
    #p-recommendation-main {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-areas: "content sidebar";
    }
}

@media screen and (max-width: 900px) {
    #p-checkout-main {
        background-color: var(--N0);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "sidebar"
            "content";
        min-height: unset;
        padding: 0 var(--gap) var(--gap);
        gap: var(--gap);
    }

    #p-recommendation-main {
        background-color: var(--N0);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "content"
            "sidebar";
        min-height: unset;
        padding: var(--gap);
        gap: var(--gap);
    }


    #p-recommendation-main .p-box,
    #p-checkout-main .p-box {
        border-radius: 0;
        border: none;
        padding: 0;
        background-color: transparent;
    }

}

#p-checkout-sidebar-details-summary {
    padding: 1rem;
    background-color: var(--B100);
    text-transform: uppercase;
    font-size: var(--small-font-size);
    font-family: var(--header-font);
    margin-inline: -1rem;
}

#p-checkout-sidebar-details .p-summary-open-label {
    display: none;
}

#p-checkout-sidebar-details[open] .p-summary-open-label {
    display: block;
}

#p-checkout-sidebar-details[open] .p-summary-closed-label {
    display: none;
}

@media screen and (min-width: 900px) {
    #p-checkout-sidebar-details-summary {
        display: none;
    }
}

@media screen and (max-width: 899px) {
    #p-checkout-sidebar-details[open] #p-checkout-sidebar-details-summary {
        margin-bottom: var(--gap);
    }
}

#p-hide-order-summary {
    padding: 1rem;
    background-color: var(--B100);
    text-transform: uppercase;
    font-size: var(--small-font-size);
    font-family: var(--header-font);
    margin-inline: -1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media screen and (min-width: 900px) {
    #p-hide-order-summary {
        display: none;
    }
}

#p-checkout-sidebar-details-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 0;
}


.p-checkout-sidebar-row {
    display: flex;
    flex-direction: row;
    gap: var(--smallest-gap);
    flex-wrap: wrap;
    line-height: var(--h4-font-size);
    font-size: var(--h4-font-size);
    font-weight: var(--semi-bold);
    font-family: var(--header-font);
}

.p-checkout-sidebar-row-label {
    flex: 1;
}

#p-checkout-sidebar-details-content .p-banner {
    margin: 0;
}

#p-checkout-basket-item-details {
    padding: 0;
}

#p-checkout-basket-item-details>summary {
    padding-top: 0;
    padding-bottom: 1rem;
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
}

#p-checkout-basket-items {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.p-checkout-basket-item {
    --image-size: 6rem;
    display: grid;
    grid-template-columns: var(--image-size) auto 1fr;
    grid-template-areas: "image description description"
        "image code-price code-price"
        "image quantity total-price";
    gap: var(--small-gap);
}

.p-checkout-basket-item-image {
    width: var(--image-size);
    height: var(--image-size);
    grid-area: image;
}

.p-checkout-basket-item .p-text-roundel,
.p-checkout-basket-item .p-image-roundel {
    grid-area: image;
    display: none;
}

.p-checkout-basket-item-description {
    grid-area: description;
}

.p-checkout-basket-item-title {
    color: var(--G400);
    margin: 0 !important;
}

.p-checkout-basket-item-title a {
    color: var(--G400);
    text-decoration: none;
}

.p-checkout-basket-item-title a:hover,
.p-checkout-basket-item-title a:active {
    text-decoration: underline;
}

.p-checkout-basket-item-portion-size {
    color: var(--N400);
    font-family: var(--header-font);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    text-transform: uppercase;
}

.p-checkout-basket-item-total-price {
    grid-area: total-price;
    text-align: right;
}

.p-checkout-basket-item-quantity {
    grid-area: quantity;
    text-transform: uppercase;
}

.p-checkout-basket-item-code-price {
    grid-area: code-price;
    border: 1px solid var(--G400);
    display: flex;
    flex-direction: row;
    font-weight: var(--semi-bold);
}

.p-checkout-basket-item-code {
    font-size: var(--small-font-size);
    background-color: var(--G100);
    text-align: center;
    border-right: 1px solid var(--G400);
    padding: var(--smaller-gap);
}

.p-checkout-basket-item-price {
    font-size: var(--small-font-size);
    text-align: center;
    padding: var(--smaller-gap);
    flex: 1;
    color: var(--G400);
}

@media screen and (max-width: 900px) {
    .p-checkout-basket-item-title {
        font-size: var(--base-font-size);
        list-style: var(--base-line-height);
    }

    .p-checkout-basket-item-total-price,
    .p-checkout-basket-item-quantity {
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
    }
}

@media screen and (max-width: 900px) {
    #p-checkout-basket-item-details>summary {
        display: none;
    }
}

.p-checkout-boxes {
    display: flex;
    flex-direction: column;
}

.p-checkout-box {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
    padding: var(--input-padding);
    border-top: 1px solid var(--N100);
    border-left: 1px solid var(--N100);
    border-right: 1px solid var(--N100);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-checkout-box:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.p-checkout-box:last-child {
    border-bottom: 1px solid var(--N100);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.p-checkout-box>label {
    flex: 1;
    cursor: pointer;
}

.p-checkout-box>label>address {
    gap: 0;
}

.p-delivery-updates {
    margin-top: var(--smaller-gap);
}

.p-checkout-existing-address-name {
    font-weight: bold;
}

.p-checkout-existing-address-free-shipping {
    color: var(--G400);
    font-family: var(--header-font);
    text-transform: uppercase;
    font-weight: var(--regular) !important;
}

.p-checkout-payment-boxes {
    display: flex;
    padding: 12px 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
}

[data-braintree-id="methods-label"] {
    display: none;
}

.p-cc-visa,
.p-cc-mastercard,
.p-cc-amex,
.p-cc-discover {
    font-size: 2rem;
}

.p-cc-visa {
    color: hsl(238, 60%, 24%);
}

.p-cc-mastercard {
    color: hsl(21, 90%, 68%);
}

.p-cc-amex {
    color: hsl(206, 84%, 38%);
}

.p-cc-discover {
    color: hsl(21, 90%, 57%);
}

.p-apple-pay-button {
    --button-color: black !important;
    color: var(--N0) !important;
}

.p-paypal-button {
    --button-color: var(--Y400);
    color: hsl(198, 100%, 45%);
}

.p-paypal-button-text {
    color: hsl(224, 78%, 29%);
}

#checkout-your-rewards {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

#checkout-your-rewards:empty {
    display: none;
}

.p-checkout-your-rewards {
    display: flex;
    flex-direction: column;
    max-height: max(8rem, 20vh);
    overflow-y: auto;
    gap: var(--small-gap);
    border-top: 1px solid var(--N100);
    border-bottom: 1px solid var(--N100);
    padding-block: var(--small-gap);
}

.p-checkout-your-rewards-with-expiry {
    max-height: max(10rem, 22vh);
}

.p-checkout-your-reward {
    display: grid;
    border: 1px solid var(--N100);
    border-radius: var(--border-radius);
    padding: var(--input-padding);
    gap: var(--smaller-gap) var(--small-gap);
    grid-template-columns: min-content 1fr;
    grid-template-areas: "icon title"
        "icon benefit"
        "button button";
}

.p-checkout-your-reward-applied {
    border: 1px solid var(--G400);
}

.p-checkout-your-reward-icon {
    color: var(--G400);
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-checkout-your-reward-title {
    color: var(--G400);
    grid-area: title;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-checkout-your-reward-benefit {
    color: var(--N400);
    grid-area: benefit;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-checkout-your-reward-expiry {
    display: block;
    font-style: italic;
    opacity: 0.85;
}

.p-checkout-your-reward-button {
    grid-area: button;
}

#p-checkout-basket-layout-container {
    background-color: var(--N100);
    border-top: 1px solid var(--N250);
    padding: var(--big-gap);
}

#p-checkout-basket-layout {
    display: grid;
    gap: var(--gap) var(--big-gap);
    grid-template-columns: 1fr 20rem;
    max-width: 75rem;
    margin-inline: auto;
}

@media screen and (max-width: 1200px) {
    #p-checkout-basket-layout-container {
        padding: var(--gap);
    }

    #p-checkout-basket-layout {
        display: grid;
        gap: var(--gap);
        grid-template-columns: 3fr 2fr;
    }
}

@media screen and (max-width: 900px) {
    #p-checkout-basket-layout-container {
        background-color: var(--N50);
        border-top: 1px solid var(--N100);
        padding: 0 var(--gap);
    }

    #p-checkout-basket-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #p-checkout-basket-layout .p-box {
        margin-inline: calc(0px - var(--gap));
        border-radius: 0;
        border: none;
        padding: var(--gap);
    }
}

#checkout-securely-button .p-mobile {
    display: none;
}

#checkout-securely-button .p-desktop {
    display: block;
}

@media screen and (max-width: 900px) {
    #checkout-securely-button .p-mobile {
        display: block;
    }

    #checkout-securely-button .p-desktop {
        display: none;
    }
}

.p-basket-items {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.p-basket-item {
    display: grid;
    grid-template-areas: "image title title title title title"
        "image portion-size portion-size portion-size portion-size portion-size"
        "image code-price . quantity total-price remove";
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 8rem auto 1fr 8rem 6rem auto;
    gap: var(--small-gap);
}

.p-basket-item-contact-centre {
    display: grid;
    grid-template-areas:
        "image title . . . ."
        "image title code-price quantity total-price remove"
        "image title . . . .";
    grid-template-columns: 4rem 1fr auto 6rem 4rem auto;
    gap: var(--small-gap);
}

@media screen and (max-width: 1400px) {
    .p-basket-item-contact-centre {
        display: grid;
        grid-template-areas:
            "image title title title title title"
            "image code-price . quantity total-price remove";
        grid-template-columns: 4rem auto 1fr 6rem 4rem auto;
        gap: var(--small-gap);
    }
}

.p-basket-item-contact-centre .p-basket-item-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}

.p-basket-item-contact-centre .p-basket-item-cp-price {
    padding: 0.4rem;
}

.p-basket-item-contact-centre .p-basket-item-cp-code-code {
    display: none;
}

.p-basket-item-contact-centre .p-basket-item-total-price {
    font-size: var(--base-font-size);
}

.p-basket-item-contact-centre .p-basket-item-portion-size,
.p-basket-item-contact-centre .p-text-roundel,
.p-basket-item-contact-centre .p-image-roundel {
    display: none;
}

.p-basket-item-contact-centre .p-placeholder-image,
.p-basket-item-contact-centre .p-placeholder-image:hover {
    --placeholder-size: 4rem;
}

.p-basket-item-image {
    grid-area: image;
    aspect-ratio: 1;
    position: relative
}

.p-basket-item .p-text-roundel,
.p-basket-item .p-image-roundel {
    grid-area: image;
    display: none;
}

.p-basket-item-title {
    grid-area: title;
    color: var(--G400);
    margin: 0;
}

.p-basket-item-title a {
    color: var(--G400);
    text-decoration: none;
}

.p-basket-item-title a:hover {
    text-decoration: underline;
}

.p-basket-item-portion-size {
    grid-area: portion-size;
    color: var(--N400);
    font-family: var(--header-font);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    text-transform: uppercase;
    font-weight: 500;
}

.p-basket-item-total-price {
    grid-area: total-price;
    text-align: center;
    font-size: var(--h4-font-size);
    font-weight: var(--semi-bold);
    line-height: 1.8rem;
}

.p-basket-item-remove {
    grid-area: remove;
    color: var(--R400);
}

@media screen and (max-width: 1200px) {
    .p-basket-item {
        grid-template-areas: "image title title title"
            "image portion-size portion-size portion-size "
            "image code-price code-price code-price"
            "image quantity total-price remove";
        grid-template-rows: 1fr auto auto auto;
        grid-template-columns: 8rem auto 1fr auto;
    }
}

@media screen and (max-width: 600px) {
    .p-basket-item {
        grid-template-areas: "image title title"
            "image portion-size portion-size"
            "image code-price code-price"
            "image quantity quantity"
            "image total-price remove";
        grid-template-rows: 1fr auto auto auto auto;
        grid-template-columns: 8rem 1fr 1fr;
        padding-bottom: var(--gap);
        border-bottom: solid 1px var(--N250);
    }

    .p-basket-item-total-price {
        text-align: left;
    }

}

@media screen and (max-width: 400px) {
    .p-basket-item {
        grid-template-areas: "image title title"
            "image portion-size portion-size"
            "code-price code-price code-price"
            "quantity quantity quantity"
            "total-price total-price remove";
        grid-template-rows: 1fr auto auto auto auto;
        grid-template-columns: clamp(6rem, 40vw, 8rem) 1fr 1fr;
    }

    .p-basket-item-title {
        font-size: var(--base-font-size);
        line-height: var(--base-line-height);
    }

    .p-basket-item .p-text-roundel {
        font-size: 0.6rem;
        line-height: 0.6rem;
    }
}

.p-checkout-concept-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--gap);
}

@media screen and (max-width: 600px) {
    .p-checkout-concept-recommendations {
        grid-template-columns: 1fr;
    }
}

.p-checkout-address-type-label {
    font-family: var(--header-font);
    text-transform: uppercase;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    color: var(--G400);
    display: block;
    margin: 0;
    padding: 0;
}

.p-big-radio {
    padding: var(--gap);
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    font-size: var(--base-font-size);
    border: 1px solid var(--N250);
    border-radius: var(--border-radius);
    justify-items: center;
    accent-color: var(--B500);
    cursor: pointer;
    --check-radio-size: var(--base-font-size);
}

.p-big-radio:hover {
    border: 1px solid var(--N500);
}

.p-big-radio span {
    flex: 1;
    user-select: none;
}

.p-big-radio-selected,
.p-big-radio-selected:hover {
    color: var(--B400);
    border: 1px solid var(--B400);
}

.p-big-radio-selected:hover {
    border: 1px solid var(--B500);
}

#p-catalogue-request-layout {
    min-height: 60vh;
    background-color: var(--N100);
    padding: var(--big-gap) var(--gap);
    display: grid;
    grid-template-columns: 1fr 28rem 21rem 1fr;
    gap: var(--gap);
    grid-template-areas: ". content sidebar .";
}

#p-catalogue-request-content {
    grid-area: content;
}

#p-catalogue-request-content .p-box {
    height: 100%;
}

#p-catalogue-request-sidebar {
    grid-area: sidebar;
}

.p-catalogue-promotions {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.p-catalogue-promotions-title>h3,
.p-catalogue-promotions-title>p {
    text-align: center;
    margin: 0;
}

.p-catalogue-promotion {
    display: grid;
    grid-template-areas:
        "promotion_image"
        "description"
        "promotion_button";
    grid-template-columns: 1fr;
    gap: var(--gap);
    grid-template-rows: auto 1fr auto;
    background-color: var(--N0);
    padding: var(--small-gap);
    border: solid var(--N250) 1px;
}

.p-catalogue-promotion-image {
    grid-area: promotion_image;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, auto);
    grid-template-areas:
        "promotion_image_img";
    aspect-ratio: 2 / 1;
    max-width: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.p-catalogue-promotion-image img {
    grid-area: promotion_image_img;
    width: 100%;
    height: auto;
    object-fit: cover;
}


.p-catalogue-promotion-description {
    grid-area: description;
    text-align: center;
}

.p-catalogue-promotion-description p:last-child {
    margin-bottom: 0;
}

.p-catalogue-promotion-button {
    grid-area: promotion_button;
}

@media screen and (max-width: 600px) {
    .p-catalogue-promotion-button {
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        padding: var(--input-padding);
    }
}


@media screen and (min-width: 901px) and (max-width: 1200px) {
    #p-catalogue-request-layout {
        padding: var(--gap);
        grid-template-columns: 2fr 1fr;
        gap: var(--gap);
        grid-template-areas: "content sidebar";
    }
}

@media screen and (max-width: 900px) {
    #p-catalogue-request-layout {
        padding: 0;
        grid-template-columns: 1fr;
        gap: var(--gap);
        grid-template-areas: "content"
            "sidebar";
    }

    #p-catalogue-request-sidebar {
        padding: var(--gap);
    }

}

.p-partner-landing-layout {
    display: grid;
    grid-template-columns: [fw-start] 1fr [wide-start] clamp(5rem, 12vw, 20rem) [content-start] 32rem [content-end] clamp(5rem, 12vw, 20rem) [wide-end] 1fr [fw-end];
    padding-bottom: var(--big-gap);
    gap: var(--gap) 0;
}




.p-partner-landing-layout>* {
    margin: 0;
    grid-column: content-start / content-end;
}

.p-partner-landing-layout>.p-full-width {
    grid-column: fw-start / fw-end;
}

.block-row {
    display: flex;
    flex-direction: row;
    gap: var(--big-gap);
}

.block-row>* {
    flex: 1;
}

.block-formatted_text p:last-child {
    margin-bottom: 0;
}

.block-wide_block {
    grid-column: wide-start / wide-end;
}

@media screen and (max-width: 900px) {
    .p-partner-landing-layout {
        grid-template-columns: [fw-start] var(--big-gap) [wide-start content-start] 1fr [content-end wide-end] var(--big-gap) [fw-end];
    }

}

@media screen and (max-width: 600px) {
    .block-row {
        flex-direction: column;
    }
}

.block-image img {
    object-fit: contain;
}

.block-hero_image {
    grid-column: fw-start / fw-end;
}

.block-hero_image>img {
    width: 100%;
    object-fit: cover;
}

.block-hero_block {
    grid-column: fw-start / fw-end;
}

.hero_block_image {
    background-size: cover;
    background-color: var(--N50);
    width: 100%;
    padding: var(--big-gap);
}

.hero_block_image .p-box {
    max-width: 32rem;
    margin-inline: auto;
    border-radius: var(--border-radius);
}

#p-contact-form-layout {
    background-color: var(--N100);
    padding: var(--big-gap) 0;
    display: grid;
    grid-template-columns: [fw-start] 1fr [content-start] 32rem [content-end] 1fr [fw-end];
    gap: var(--big-gap);
}

#p-contact-form-layout>* {
    grid-column: content-start / content-end;
}

@media screen and (max-width: 900px) {
    #p-contact-form-layout {
        grid-template-columns: [fw-start] 0px [content-start] 1fr [content-end] 0px [fw-end];
    }
}

@media screen and (max-width: 600px) {
    #p-contact-form-layout {
        padding: 0;
    }

    #p-contact-form-layout>* {
        grid-column: fw-start / fw-end;
    }

}


.block-trustpilot {
    width: 100%;
    background-color: var(--G100);
    text-align: center;
    padding-bottom: calc(1.6rem - 6px);
    padding-top: 1.6rem;
    padding-inline: 1.6rem;
}

.block-testimonial {
    width: 100%;
    background-color: var(--B100);
    padding: var(--big-gap);
    display: flex;
    flex-direction: row;
    gap: var(--big-gap);
    justify-content: center;
    align-items: center;
}

.block-testimonial .testimonial_image {
    border: 8px solid white;
    box-shadow: 0px 8px 12px 0px rgba(33, 35, 31, 0.25);
    max-width: 20rem;
    max-height: 20rem;
    object-fit: cover;
}

.block-testimonial blockquote {
    width: 100%;
    max-width: 30rem;
    position: relative;
}

.block-testimonial blockquote .p-quotation {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.block-testimonial blockquote .p-quotation>* {
    position: relative;
    z-index: 101;
}

/* .block-testimonial blockquote .p-quotation::before {
    font-family: var(--header-font);
    position: absolute;
    content: "\201C";
    left: -1.5rem;
    top: -1.5rem;
    z-index: 100;
    color: var(--N300);
    font-size: 5rem;
    font-weight: bold;
}

.block-testimonial blockquote .p-quotation::after {
    font-family: var(--header-font);
    position: absolute;
    content: "\201D";
    right: 0;
    bottom: -1.0rem;
    z-index: 100;
    color: var(--N300);
    font-size: 5rem;
    font-weight: bold;
} */

.block-testimonial blockquote .p-quotation .left-quote,
.block-testimonial blockquote .p-quotation .right-quote {
    position: absolute;
    z-index: 100;
    font-family: var(--header-font);
    font-size: 5rem;
    font-weight: bold;
    color: var(--N300);
}

.block-testimonial blockquote .p-quotation .left-quote::before {
    position: absolute;
    content: "\201C";
    left: -1.5rem;
    top: 1rem;
}

.block-testimonial blockquote .p-quotation .right-quote::after {
    position: absolute;
    content: "\201D";
    right: -1.5rem;
    top: 1.5rem;
}

.block-testimonial blockquote .p-quotation .quote-text {
    position: relative;
    z-index: 110;
}

.block-testimonial blockquote .p-quotation * {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-family: var(--header-font);
    color: var(--N600);
}

.block-testimonial blockquote .p-quotation .p-tab:last-child {
    margin-bottom: 0;
}

.block-testimonial blockquote cite {
    font-style: normal;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    flex-wrap: wrap;
}

@media screen and (max-width: 900px) {
    .block-testimonial {
        flex-direction: column;
        padding-inline: var(--gap);
        gap: var(--gap);
    }

    .block-testimonial .p-quotation {
        width: 100%;
    }

    .block-testimonial>img {
        width: 100%;
    }
}

.block-how_it_works_block {
    padding: var(--big-gap);
    align-items: center;
    justify-content: center;
    gap: var(--big-gap);
    background-color: var(--N100);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--N250);
    border-bottom: 1px solid var(--N250);
}

.block-how_it_works_block+.block-how_it_works_block {
    border-top: none;
}



.block-how_it_works_block h2 {
    text-align: center;
    margin: 0;
}

.how_it_works_items {
    display: flex;
    flex-direction: row;
    gap: var(--big-gap);
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.how_it_works_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 16rem;
    flex: 1;
    min-width: 8rem;
}

.how_it_works_item img {
    max-width: 100%;
    aspect-ratio: 1;
}

.how_it_works_item h3 {
    color: var(--G400);
    text-align: center;
    text-wrap: balance;
}

.how_it_works_item p {
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

.block-youtube_embed_block {
    background-color: var(--N0);
    display: flex;
    padding-block: var(--big-gap);
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
}

.youtube_embed {
    width: 100%;
    max-width: 640px;
    max-height: 360px;
    aspect-ratio: 16 / 9;
}

.p-code-applied {
    color: var(--G400);
    text-align: center;
    padding: 0.6rem 1rem;
    font-weight: bold;
}

.p-promo-landing-page-content-container {
    width: auto;
    padding: var(--big-gap);
}

.p-promo-landing-page-content {
    max-width: 1500px;
    display: flex;
    flex-direction: row;
    gap: var(--big-gap);
    margin-inline: auto;
}

.p-promo-landing-page-content-main {
    flex: 2;
}

.p-promo-landing-page-content-aside {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

@media screen and (max-width: 900px) {
    .p-promo-landing-page-content-container {
        padding: var(--gap);
    }

    .p-promo-landing-page-content {
        flex-direction: column;
        gap: var(--gap);
    }

    .p-promo-landing-page-content-main {
        flex: unset;
    }

    .p-promo-landing-page-content-aside {
        flex: unset;
    }
}

figure {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

figure img {
    object-fit: scale-down;
}

figcaption {
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    text-align: center;
}

.p-icon svg {
    display: inline-block;
    font-size: 1em;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
    box-sizing: content-box;
}

.favourite-products-link,
.recently-ordered-link {
    font-family: var(--header-font);
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: var(--regular);
    text-decoration: none;
    color: var(--N800);
}

.favourite-products-link {
    color: var(--N800);
}

.favourite-products-link:hover,
.favourite-products-link-active {
    color: var(--R250);
}

.recently-ordered-link {
    color: var(--N800);
}

.recently-ordered-link:hover,
.recently-ordered-link-active {
    color: var(--B400);
}


.round-button {
    background-color: transparent;
    border-radius: 100vmax;
    padding: 4px;
    width: var(--h4-line-height);
    height: var(--h4-line-height);
    border: none;
}

.not-favourite {
    color: var(--N600);
}

.not-favourite:hover {
    color: var(--N0);
    background-color: var(--R250);
}

.not-favourite:active {
    color: var(--R250);
    background-color: var(--N0);
}

.favourite {
    color: var(--R250);
}

.favourite .heart-crack {
    display: none;
}

.favourite:hover .heart-crack {
    display: inline-block;
}

.favourite .heart-solid {
    display: inline-block;
}

.favourite:hover .heart-solid {
    display: none;
}

.p-placeholder-image,
.p-placeholder-image:hover {
    --placeholder-size: 8rem;
    --placeholder-width: var(--placeholder-size);
    --placeholder-height: var(--placeholder-size);
    width: var(--placeholder-width);
    height: var(--placeholder-height);
    border-radius: var(--border-radius);
    background-color: var(--G100);
    border: 1px solid var(--G400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--placeholder-size) / 2);
    color: var(--G400);
}

.p-toast {
    background: var(--N800) !important;
    color: var(--N0) !important;
    font-size: var(--small-font-size) !important;
    line-height: var(--small-line-height) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--input-padding) !important;
}

@media screen and (max-width: 600px) {
    .p-toast.toastify-right {
        max-width: 100%;
        left: var(--gap);
        right: var(--gap);
    }
}

.p-contact-start-layout {
    background-color: var(--N100);
    padding: var(--big-gap) 0;
    display: grid;
    grid-template-columns: 1fr 32rem 32rem 1fr;
    gap: var(--big-gap);
}

.p-user-details {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    grid-column: 2 / 3;
}

.p-user-details h5 {
    padding: 0;
    margin: 0;
}

.p-user-details>* {
    margin: 0;
}

.p-contact-centre-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    grid-column: 3 / 4;
}

.p-white-button {
    --button-color: var(--N0) !important;
}

.p-white-button:hover {
    --button-color: var(--N0) !important;
    border: 1px solid var(--B400);
}

.p-white-button:active {
    --button-color: var(--N0) !important;
}

.p-community-article-summaries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--bigger-gap);
}

.p-community-article-summary {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    text-align: center;
}

.p-community-article-summary>h3,
.p-community-article-summary>p {
    padding: 0 !important;
    margin: 0 !important;
    text-wrap: balance;
}

.p-community-article-summary h3 a {
    text-decoration: none;
    color: var(--G400);
}

.p-community-article-summary h3 a:hover {
    text-decoration: underline;
}

.p-community-article-summary>* {
    margin: 0;
}


.p-community-article-summary-meta {
    text-align: center;
    color: var(--G400);
    text-transform: uppercase;
    font-size: var(--small-font-size);
    display: flex;
    flex-direction: row;
    font-family: var(--header-font);
    font-weight: var(--bold);
}

.p-community-article-summary-date {
    border-right: 1px var(--G400) solid;
    flex: 1;
}

.p-community-article-summary-category {
    flex: 1;
}

/* LAYOUTS */
/* Community page layout */
#p-community-page-layout {
    position: relative;
    max-width: 75rem;
    margin-inline: auto;
    display: grid;
    grid-template-areas: "sidebar content";
    grid-template-columns: 1fr 4fr;
    border-top: 1px solid var(--N100);
}

#p-community-page-layout-sidebar {
    grid-area: sidebar;
    border-right: 1px solid var(--N100);
}

#p-community-page-layout-content {
    grid-area: content;
    padding: var(--big-gap);
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: var(--big-gap);
}

#p-community-page-layout-content-header>*:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

#p-community-page-layout-content h1:first-of-type {
    margin-top: 0;
}

.p-community-page-layout-sidebar-link {
    text-decoration: none;
    color: var(--N600);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-community-page-layout-sidebar-link:hover,
.p-community-page-layout-sidebar-link:focus,
.p-community-page-layout-sidebar-link:active {
    text-decoration: underline;
    color: var(--B400);
}

.p-community-page-layout-sidebar-link.current {
    text-decoration: underline;
    cursor: default;
    color: var(--G400);
}

#p-community-page-layout-sidebar-content {
    width: 100%;
    position: sticky;
    top: 0;
    background-color: var(--N0);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap);
    scroll-behavior: smooth;
    max-height: 100vh;
}

#p-community-page-layout-sidebar-content>h6 {
    margin: 0;
    padding: 0;
}

#p-community-page-layout-close-sidebar,
#p-community-page-layout-open-sidebar {
    display: none;
}

@media screen and (max-width: 1200px) {
    #p-community-page-layout {
        grid-template-columns: 1fr 3fr;
    }
}

@media screen and (max-width: 900px) {
    #p-community-page-layout {
        grid-template-areas: "content";
        grid-template-columns: 1fr;
    }

    #p-community-page-layout-sidebar {
        display: flex;
        grid-area: none;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 80vw;
        z-index: 1000;
        box-shadow: 1px 0px 15px hsl(0, 0%, 0%, 0.05);
        transform: translateX(-100vw);
        transition: transform var(--transition-duration);

    }

    #p-community-page-layout-close-sidebar,
    #p-community-page-layout-open-sidebar {
        display: block;
    }
}

#p-community-article-layout {
    padding: var(--big-gap);
    width: auto;
}

#p-community-article-layout-content {
    max-width: 40rem;
    margin-inline: auto;
}

#p-community-article-layout-content h1 {
    text-wrap: balance;
}

.p-community-article-layout-image-container {
    margin-block: var(--gap);
}

.p-community-article-summary-image-container {
    aspect-ratio: 4/5;
    overflow: hidden;
}

.p-community-article-summary-image {
    object-fit: cover;
    height: 100%;
}

/* Podcasting block */
.p-podcast-player {
    border: 1px solid var(--G400);
    padding: var(--gap);
    border-radius: var(--border-radius);
    background-color: var(--G100);
    gap: var(--gap);
    display: flex;
    flex-direction: column;
    margin-bottom: var(--gap);
}

.p-podcast-player h4 {
    margin: 0;
    padding: 0;
    color: var(--G400);
}

.p-podcast-player-progress-container {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
}

.p-podcast-player-progress-container>span {
    width: 2rem;
    user-select: none;
}

.p-podcast-player-progress {
    flex: 1;
}

.p-podcast-player-controls {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.p-podcast-player-controls-play-pause {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-podcast-player-controls-volume {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
}

.p-podcast-player-controls-volume>button {
    flex: 1;
}

.p-podcast-player-controls-volume>span {
    min-width: 2rem;
    text-align: center;
    color: var(--G400);
    user-select: none;
}

progress {
    -webkit-appearance: none;
    appearance: none;
    height: 0.6rem;
}

progress::-webkit-progress-bar {
    background-color: var(--N0);
    border: 1px solid var(--G400);
    border-radius: 100vmax;
}

progress[value]::-webkit-progress-bar {
    background-color: var(--N0);
    border: 1px solid var(--G400);
    border-radius: 100vmax;
    overflow: hidden;
}

progress[value]::-webkit-progress-value {
    background-color: var(--G400);
}

@media screen and (max-width: 600px) {
    .block-podcast {
        margin-inline: calc(0px - var(--big-gap));
    }

    .p-podcast-player {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .p-podcast-player-controls {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .p-podcast-player-controls-volume {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--small-gap);
    }

    .p-podcast-player-controls-play-pause>button {
        padding: 0.6rem 1rem;
    }
}

.p-highlighted-meal {
    outline: var(--smaller-gap) var(--Y100) solid;
    background-color: var(--Y100);
}

.p-highlighted-meal .p-product-box-title a {
    color: var(--Y800);
}

#p-qo-layout {
    margin-inline: auto;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-block: var(--big-gap);
}

#p-qo-search-container {
    position: relative;
}

#p-qo-products {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--N250);
    position: absolute;
    background-color: var(--N0);
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
}

#p-qo-products-empty {
    border: 1px solid var(--N250);
    padding: var(--smallest-gap);
    position: absolute;
    background-color: var(--N0);
    left: 0;
    right: 0;
    top: 100%;
}

.p-qo-product {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    align-items: center;
    padding: var(--smallest-gap);
    background-color: var(--N0);
}

.p-qo-product+.p-qo-product {
    border-top: 1px solid var(--N250);
}

.p-qo-product:hover,
.p-do-selected-result {
    background-color: var(--G100);
    outline: 1px solid var(--G400);
    cursor: pointer;
}

.p-qo-product-title {
    flex-grow: 1;
}

.p-qo-out-of-stock,
.p-qo-out-of-stock:hover {
    background-color: var(--N50);
    outline: none;
    cursor: not-allowed;
}

.p-qo-out-of-stock .p-qo-product-code,
.p-qo-out-of-stock .p-qo-product-title {
    opacity: 0.5;
}

.p-qo-product-out-of-stock-message,
.p-qo-product-low-stock-message,
.p-qo-product-reduced {
    text-align: center;
    padding: var(--smallest-gap);
    text-transform: uppercase;
    font-weight: var(--semi-bold);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
}

.p-qo-product-low-stock-message,
.p-qo-product-out-of-stock-message {
    background-color: var(--Y100);
    border: 1px solid var(--Y400);
}

.p-qo-product-reduced {
    background-color: var(--B100);
    border: 1px solid var(--B400);
}


.p-qo-product-code {
    background-color: var(--G100);
    border: 1px solid var(--G400);
    text-align: center;
    padding: var(--smallest-gap);
    text-transform: uppercase;
    font-weight: var(--semi-bold);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    width: 6rem;
}

#p-qo-added-products td {
    border: none;
}

#p-qo-added-products tr {
    border: 1px solid var(--N250);
}

.p-qo-row-code,
.p-qo-row-price,
.p-qo-row-qty,
.p-qo-row-total,
.p-qo-row-remove {
    text-align: center;
}

.p-qo-row-price-reduced {
    color: var(--R400);
    text-decoration: line-through;
    padding-right: var(--small-gap);
}

#p-qo-promotional-code-row-code {
    color: var(--B400);
    text-transform: uppercase;
    padding: var(--smallest-gap);
    background-color: var(--B100);
    border: 1px solid var(--B400);
}

.p-qo-promo-code-restrictions {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

.p-qo-promo-code-restrictions:empty {
    display: none;
}

.p-qo-promo-code-restriction {
    display: inline-block;
    padding: var(--smallest-gap);
    border: 1px solid var(--Y400);
    background-color: var(--Y100);
    border-radius: var(--border-radius);
    font-size: var(--small-font-size);
}

#p-qo-promo-code-search-codes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--N0);
}

.p-qo-promo-code-search-code {
    padding: var(--small-gap);
    border: 1px solid var(--N250);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}

#p-search-results-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    gap: 0;
    background-color: var(--N0);
    border: 1px solid var(--N250);
    z-index: 10000;
    border-radius: 0px 0px var(--border-radius) var(--border-radius);
}

#p-search-results-container button {
    border-radius: 0px 0px var(--border-radius) var(--border-radius);
    margin: 0px -1px -1px -1px;
}

.p-search-result {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
    padding: var(--small-gap);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    border-radius: 0;
    align-items: baseline;
    text-decoration: none;
}

.p-search-result-title {
    text-decoration: underline;
}

.p-search-result + .p-search-result {
    border-top: 1px solid var(--N250);
}

.p-search-result-code,
.p-search-result-category {
    display: inline-block;
    text-transform: uppercase;
    padding: 0.2em;
    margin: -0.2em 0 -0.2em -0.2em;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    width: 6rem;
    text-align: center;
}

.p-search-result-code {
    background-color: var(--G100);
    border: 1px solid var(--G400);
    color: var(--G500);
}

.p-search-result-category {
    background-color: var(--B100);
    border: 1px solid var(--B400);
    color: var(--B500);
}

@media screen and (max-width: 600px) {
    .p-search-result {
        padding-block: var(--gap);
        line-height: var(--base-line-height);
    }
    .p-search-result-code,
    .p-search-result-category {
        width: 3rem;
        flex-shrink: 0;
    }
}

.p-product-bundle-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--bigger-gap);
}

.p-product-bundle-item {
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

.p-product-bundle-item-description {
    display: flex;
    flex-direction: column;
    gap: var(--smallest-gap);
    justify-content: space-between;
    flex: 1;
}

.p-product-bundle-item-description-details {
    display: flex;
    flex-direction: column;
    gap: var(--smallest-gap);
}

.p-product-bundle-item-title {
    padding: 0;
    margin: 0;
    text-wrap: balance;
}

.p-product-bundle-item-title a {
    color: var(--G400);
    text-decoration: none;
}

.p-product-bundle-item-title a:hover {
    color: var(--G300);
    text-decoration: underline;
}

.p-product-bundle-item-portion-size {
    color: var(--N400);
    font-family: var(--header-font);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    text-transform: uppercase;
    font-weight: 500;
}

.p-product-bundle-item-qty-code {
    background-color: var(--N0);
    border: 1px solid var(--G400);
    display: flex;
    flex-direction: row;
}

.p-product-bundle-item-qty-code > span {
    color: var(--N600);
    padding: 0.5rem 0.8rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--semi-bold);
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    flex-grow: 1;
}

.p-product-bundle-item-code {
    border-left: 1px solid var(--G400);
    background-color: var(--G100);
}

@media screen and (max-width: 600px) {
    .p-product-bundle-item-code-label {
        display: none;
    }

    .p-product-bundle-item-image-link img {
        width: 6rem;
        height: 6rem;
    }

    .p-product-bundle-items {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
}

@media screen and (min-width: 601px) {
    #id_date_of_birth_day-row {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
    }
    
    #id_date_of_birth_day-row label {
        grid-column: 1 / -1;
    }
}

@media screen and (min-width: 901px) {
    #id_date_of_birth_day-row {
        justify-content: stretch;
    }
}