/*-----------------*/
/*--- F O N T S ---*/
/*-----------------*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/*-------------------------------------------*/
/*--- S I T E W I D E   C O N S T A N T S ---*/
/*-------------------------------------------*/

:root {
    /*--- standard colours ---*/
    --black: 0, 0, 0;
    --grey-875: 32, 32, 32;
    --grey-750: 64, 64, 64;
    --grey-625: 96, 96, 96;
    --grey-500: 128, 128, 128;
    --grey-375: 160, 160, 160;
    --grey-250: 192, 192, 192;
    --grey-125: 224, 224, 224;
    --white: 255, 255, 255;

    /*--- design specific ---*/
    --grey: 83, 83, 83;
    --grey-light: 250, 250, 250;
    --teal: 38, 102, 90;
    --teal-dark: 34, 65, 55;
    --green: 51, 101, 16;
    --green-light: 58, 187, 18;
    --red: 140, 20, 20;
    --yellow: 245, 201, 69;

    /*--- fonts ---*/
    --font-family: 'Montserrat', sans-serif;

    /*--- font sizes ---*/
    --xl: 60rem; /* Extra Large - H1 headings, main titles */
    --l: 30rem; /* Large - H2 headings, subtitles */
    --m: 24rem; /* Medium - H3 headings, accents */
    --s: 16rem; /* Small - body text, buttons */
    --xs: 14rem; /* Extra Small - small text, captions */
}


/*-------------------*/
/*--- G L O B A L ---*/
/*-------------------*/

* {
    margin: 0;
    padding: 0;
    line-height: inherit;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: rgb(var(--teal));
}

body {
    font-family: var(--font-family);
    font-size: var(--s);
    font-weight: 400;
    line-height: 1;
    color: rgb(var(--grey));
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(var(--white));
}

main { margin: -30rem 0; }

main hr {
    border: 7.5rem solid rgb(var(--teal-dark));
}

section { margin: 120rem 0; }

img { display: block; }

a:not(.button):focus, button:not(.button):focus, input:focus {
    outline: 2rem solid rgb(var(--yellow));
}

.container {
    width: 100%;
    max-width: 1280rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 60rem;
}

aside {
    background: rgb(var(--grey-light));
    box-shadow: 1rem 2rem 4rem rgba(var(--green), 0.25);
    border-radius: 30rem;
    padding: 30rem 45rem;
}

/*--- dialog ---*/
dialog {
    top: 25%;
    left: 50%;
    width: 100%;
    max-width: 500rem;
    text-align: center;
    box-shadow: 5rem 5rem rgba(var(--teal-dark), 0.5);
    transform: translateX(-50%);
}

dialog > div,
dialog > .buttons {
    margin: 30rem;
}

dialog::backdrop {
    background-color: rgba(var(--teal-dark), 0.5);
}

dialog h1 {
    margin-bottom: 15rem;
    font-size: var(--m);
    font-weight: 600;
    text-transform: none;
}

dialog .buttons {
    margin-top: 30rem;
}


/*--------------------*/
/*-- H E L P E R S ---*/
/*--------------------*/

.is-sr-only {
    position: absolute;
    left: -10000px;
}

.is-hidden-onload { display: none !important; }

.is-hidden-desktop { display: none; }


/*-----------------------*/
/*--- D E F A U L T S ---*/
/*-----------------------*/

h1, h2, h3 {
    max-width: 960rem;
    font-weight: 400;
    text-transform: uppercase;
    color: rgb(var(--teal));
}

h1 { font-size: var(--xl); }

h2 { font-size: var(--l); }

h3 { font-size: var(--m); }

h4 {
    font-size: var(--s);
    font-weight: 600;
    color: rgb(var(--grey));
}

p, li, ol {
    font-weight: 400;
}

a {
    color: rgb(var(--teal));
    text-decoration: none;
}

a:hover {
    color: rgb(var(--green));
}

strong { font-weight: 600; }

ul { list-style: none; }


/*-------------------------------*/
/*--- G O O G L E   I C O N S ---*/
/*-------------------------------*/

.icon {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/*-----------------*/
/*--- F O R M S ---*/
/*-----------------*/

.form select,
.form input {
    position: relative;
    height: 3em;
    padding: 0.5em 1em;
    font-size: var(--s);
    font-weight: 400;
    font-family: var(--font-family);
    color: rgb(var(--grey-875));
    border: 1px solid rgb(var(--grey-125));
    border-radius: 0.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form input[type="email"],
.form input[type="text"],
.form input[type="password"],
.form select {
    width: 100%;
}

.form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%2326655A'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10rem center;
    background-size: 20rem 20rem;
    padding-right: 40rem;
}

.form input::-moz-placeholder,
.form input::placeholder {
    letter-spacing: 1.4rem;
}

/*--- checkbox ---*/

.form label.checkbox {
    display: flex;
    gap: 15rem;
    align-items: center;
}

.form label.checkbox span {
    position: relative;
    display: block;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgb(var(--teal));
    border-radius: 2rem;

}

.form label.checkbox input { display: none; }

.form label.checkbox input:checked + span::after {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 22rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(var(--teal));
}


/*---------------*/
/*--- T E X T ---*/
/*---------------*/

.text h1 + h2,
.text h2 + h3 {
    margin-top: 1em;
}

.text h2, .text h3 {
    line-height: 1.3;
}

.text p, .text ul, .text dl {
    margin-top: 1em;
    line-height: 1.7;
}

.text p { max-width: 960rem; }

.text p:first-child { margin-top: 0; }

.text ul {
    list-style: disc;
    list-style-position: inside;
}

.text dl dt {
    float: left;
    clear: both;
    padding-right: 1em;
    font-weight: 600;
}

.text dl dd {
    margin: 0.5em 0;
}

.text a:not([class]) {
    text-decoration: underline;
}


/*-----------------------------------*/
/*--- R O W S   &   C O L U M N S ---*/
/*-----------------------------------*/

/*--- rows ---*/
.rows {
    --row-gap: 0px;

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

/* gaps */
.rows.-gap-5 { --row-gap: 5rem; }

.rows.-gap-15 { --row-gap: 15rem; }

.rows.-gap-30 { --row-gap: 30rem; }

.rows.-gap-45 { --row-gap: 45rem; }

.rows.-gap-60 { --row-gap: 60rem; }

.rows.-gap-90 { --row-gap: 90rem; }

.rows.-gap-120 { --row-gap: 120rem; }

.rows.-align-right{ align-items: flex-end; }


/*--- cols ---*/
.cols {
    --row-gap: 0px;
    --col-gap: 0px;

    display: flex;
    margin: calc((var(--row-gap) / 2) * -1) calc((var(--col-gap) / 2) * -1);
}

.cols > * {
    flex: 1 1 1%;
    margin: calc(var(--row-gap) / 2) calc(var(--col-gap) / 2);
}

/* widths */
.cols .col-1-12 { flex-basis: calc(100% / 12 - var(--col-gap)); }

.cols .col-2-12, .cols .col-1-6 { flex-basis: calc(100% / 12 * 2 - var(--col-gap)); }

.cols .col-3-12, .cols .col-1-4 { flex: 0 0 calc(100% / 12 * 3 - var(--col-gap)); }

.cols .col-4-12, .cols .col-1-3 { flex: 0 0 calc(100% / 12 * 4 - var(--col-gap)); }

.cols .col-5-12 { flex: 0 0 calc(100% / 12 * 5 - var(--col-gap)); }

.cols .col-6-12, .cols .col-1-2 { flex: 0 0 calc(100% / 12 * 6 - var(--col-gap)); }

.cols .col-7-12 { flex: 0 0 calc(100% / 12 * 7 - var(--col-gap)); }

.cols .col-8-12, .cols .col-2-3 { flex: 0 0 calc(100% / 12 * 8 - var(--col-gap)); }

.cols .col-9-12, .cols .col-3-4 { flex: 0 0 calc(100% / 12 * 9 - var(--col-gap)); }

.cols .col-10-12, .cols .col-5-6 { flex: 0 0 calc(100% / 12 * 10 - var(--col-gap)); }

.cols .col-11-12 { flex: 0 0 calc(100% / 12 * 11 - var(--col-gap)); }

.cols .col-12-12, .cols .col-full { flex: 0 0 calc(100% - var(--col-gap)); }

/* gaps */
.cols.-gap-15 { --col-gap: 15rem; --row-gap: 15rem; }

.cols.-gap-30 { --col-gap: 30rem; --row-gap: 30rem; }

.cols.-gap-45 { --col-gap: 45rem; --row-gap: 45rem; }

.cols.-gap-60 { --col-gap: 60rem; --row-gap: 60rem; }

.cols.-gap-90 { --col-gap: 90rem; --row-gap: 90rem; }

.cols.-gap-120 { --col-gap: 120rem; --row-gap: 120rem; }

/* misc */
.cols.-wrap { flex-wrap: wrap; }

.cols.-reverse { flex-direction: row-reverse; }

.cols.-middle { align-items: center; }


/*---------------------*/
/*--- F L E X B O X ---*/
/*---------------------*/

.no-flex { flex: none; }


/*-----------------*/
/*--- L I S T S ---*/
/*-----------------*/

ul.no-bullets { list-style: none; }


/*---------------------*/
/*--- M A R G I N S ---*/
/*---------------------*/

.mt-60 { margin-top: 60rem; }


/*---------------------*/
/*--- B U T T O N S ---*/
/*---------------------*/

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.button {
    position: relative;
    display: inline-flex;
    min-height: 3em;
    min-width: 12.5em;
    padding: 0 1em;
    align-items: center;
    justify-content: center;
    font-size: var(--s);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 100em;
    transition: all ease-in-out .25s;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.button:hover { text-decoration: none; }

.button.-v1 {
    color: rgb(var(--teal));
    border-color: rgb(var(--teal));
}

.button.-v2 {
    color: rgb(var(--white));
    background-color: rgb(var(--green));
}

.button.-v3 {
    color: rgb(var(--teal));
    border-color: rgb(var(--teal));
}

.button.-v4 {
    color: rgb(var(--grey));
    border-color: rgb(var(--grey));
}

.button.-v5 {
    background: transparent;
    color: rgb(var(--red));
    border-color: rgb(var(--red));
}

.button:focus { outline: none; }

.button.-v1:hover, a:hover .button.-v1, .button.-v1:focus {
    color: rgb(var(--white));
    background-color: rgb(var(--teal));
}

.button.-v2:hover, .button.-v2:focus {
    background-color: rgba(var(--green), 0.75);
}

.button.-v3:hover, .button.-v3:focus {
    background: rgb(var(--teal));
    color: rgb(var(--white));
}

.button.-v4:hover, .button.-v4:focus {
    background: rgb(var(--grey));
    color: rgb(var(--white));
}

.button.-v5:hover, .button.-v5:focus {
    color: rgb(var(--white));
    background-color: rgb(var(--red));
    border-color: rgb(var(--red));
}

.button.-small {
    font-size: 0.5em;
}

.button.-icon {
    min-width: 1.5em;
    min-height: 1.5em;
    padding: 0;
    font-size: var(--m);
}

.read-more {
    text-transform: uppercase;
    color: rgb(var(--teal));
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-top: 2em;
    letter-spacing: 0.4em;
}

.read-more img {
    margin-left: 2em;
    display: block;
    transition: all 0.3s ease;
}

.read-more:hover img {
    transform: translateX(10rem);
}

.read-more:hover {
    color: rgb(var(--green));
}


/*---------------*/
/*--- L E A F ---*/
/*---------------*/

.leaf {
    position: relative;
    width: 100%;
    container-type: inline-size;
}

.leaf div {
    overflow: hidden;
}

.leaf::after {
    position: absolute;
    top: var(--top-offset);
    left: var(--left-offset);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    content: '';
    border: 1px solid rgb(var(--teal));
    z-index: 1;
}

.leaf div img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.2s ease-in-out;
}

/*--- directions ---*/
.leaf.-left div { border-radius: 0 var(--leaf-radius); }

.leaf.-left::after {
    border-radius: 0 calc(var(--leaf-radius) - var(--top-offset)) 0 calc(var(--leaf-radius) - var(--left-offset));
}

.leaf.-right div { border-radius: var(--leaf-radius) 0; }

.leaf.-right::after {
    border-radius: calc(var(--leaf-radius) - var(--top-offset)) 0 calc(var(--leaf-radius) + var(--left-offset)) 0;
}

/*--- aspect ratio ---*/
.leaf.-aspect-square div { aspect-ratio: 1; }

.leaf.-aspect-4-3 div { aspect-ratio: 4/3; }

.leaf.-aspect-6-5 div { aspect-ratio: 6/5; }


/*--- radius ---*/
.leaf.-radius-30 { --leaf-radius: 30cqw; }

.leaf.-radius-45 { --leaf-radius: 45cqw; }

.leaf.-radius-60 { --leaf-radius: 60cqw; }


/*--- offset amount ---*/
.leaf.-offset-5 { --leaf-offset: 5rem; }

.leaf.-offset-10 { --leaf-offset: 10rem; }

.leaf.-offset-20 { --leaf-offset: 20rem; }


/*--- offset position ---*/
.leaf.-offset-tl {
    --top-offset: calc(var(--leaf-offset) * -1);
    --left-offset: calc(var(--leaf-offset) * -1);
}

.leaf.-offset-tr {
    --top-offset: calc(var(--leaf-offset) * -1);
    --left-offset: var(--leaf-offset);
}

.leaf.-offset-br {
    --top-offset: var(--leaf-offset);
    --left-offset: var(--leaf-offset);
}

.leaf.-offset-bl {
    --top-offset: var(--leaf-offset);
    --left-offset: calc(var(--leaf-offset) * -1);
}


/*-------------------------*/
/*--- I C O N   L I S T ---*/
/*-------------------------*/

.icon-list ul li, .icon-list li {
    position: relative;
    padding-left: 2em;
    list-style: none;
}

.icon-list ul li::before,
.icon-list li::before {
    position: absolute;
    top: -0.2em;
    left: 0;
    font-size: 1.25em;
    font-family: 'Material Symbols Outlined';
    content: var(--list-icon);
    color: inherit;
}

.icon-list.-calendar { --list-icon: 'calendar_today'; }


/*-------------------*/
/*--- H E A D E R ---*/
/*-------------------*/

body > header {
    padding: 22.5rem 60rem;
}

body > header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body > header a img {
    width: 420rem;
}

body > header ul {
    display: flex;
    gap: 15rem;
    align-items: center;
}

body > header ul li .button {
    margin-left: 15rem;
}

body > header ul a,
body > header ul button {
    color: rgb(var(--teal));
    font-size: 32rem;
}

body > header ul a:not(.button):hover,
body > header ul button:hover {
    opacity: 0.66;
}

body > header .form {
    position: relative;
    width: 250rem;
}

body > header .form input {
    padding-right: 60rem;
    border-radius: 100rem;
    display: inline-block;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

body > header .form button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/*-------------*/
/*--- N A V ---*/
/*-------------*/

body > nav {
    padding: 0 60rem;
    background: rgba(var(--grey-light));
}

body > nav .nav {
    display: flex;
    gap: 45rem;
    align-items: center;
    justify-content: center;
}

body > nav .nav > li {
    position: relative;
}

body > nav .sub-nav {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 90rem;
    left: 0;
    text-align: left;
    background: rgb(var(--white));
    border-top: 2rem solid rgb(var(--teal));
    z-index: 100;
}

body > nav .sub-nav:hover {
    border-color: transparent;
}

body > nav .sub-nav::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: '';
    background: rgba(var(--teal), 0.125);
}

body > nav .sub-nav li {
    position: relative;
    border-top: 1px solid rgb(var(--white));
}

body > nav .sub-nav li:first-child {
    border-top: none;
}

body > nav li a {
    display: block;
    padding: 0 30rem;
    text-transform: uppercase;
    font-weight: 500;
    color: rgb(var(--grey));
    line-height: 90rem;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2rem solid transparent;
}

body > nav .sub-nav li a {
    line-height: 60rem;
}

body > nav ul li a:hover,
body > nav ul li a.selected {
    color: rgb(var(--teal));
    border-color: rgb(var(--teal));
}


/*--- contact ---*/

#contact {
    line-height: 1.7;
    background-color: rgb(var(--white));
}

#contact.container {
    padding-right: calc((100% / 3) - 120rem);
    background: url("/images/dancing-lady.svg") right 60rem center / calc((100% / 3) - 120rem) auto no-repeat;
}

#contact .left p {
    margin: 30rem 0;
}

#contact .left ul {
    display: flex;
    flex-direction: column;
    gap: 22.5rem;
}

#contact .left a {
    position: relative;
    display: inline-block;
    padding-left: 45rem;
    line-height: 1.7;
}

#contact a::before { --icon: 'call'; }

#contact a.address::before { --icon: 'location_on'; }

#contact .left a::before {
    position: absolute;
    top: -0.25em;
    left: 0;
    font-size: 1.5em;
    font-family: 'Material Symbols Outlined';
    content: var(--icon);
    color: rgb(var(--green));
}

#contact .left a:hover { text-decoration: underline; }

#contact .form-wrapper {
    background: rgba(var(--green), 0.05);
    padding: 15rem 45rem 45rem 15rem;
    border-radius: 0 45rem 0 45rem;
    position: relative;
    text-align: center;
}

#contact .form-wrapper::after {
    position: absolute;
    top: -15rem;
    left: -15rem;
    border: 1px solid rgb(var(--green));
    border-radius: inherit;
    width: 100%;
    height: 100%;
    content: '';
}

#contact .form-wrapper h2 {
    color: rgb(var(--green));
    margin-bottom: 12rem;
}

#contact .form-wrapper p {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 20rem;
}

#contact .form {
    position: relative;
    z-index: 1;
}

#contact .button {
    margin-top: 15rem;
}


/*-----------------------*/
/*--- H O M E P A G E ---*/
/*-----------------------*/

/*--- carousel ---*/
#carousel {
    margin-top: 30rem;
}

#carousel ul {
    max-height: calc(100% * 0.34);
    aspect-ratio: 3.4;
    overflow: hidden;
}

#carousel .slide {
    width: 100%;
    height: 100%;
}

#carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#carousel .flickity-page-dots {
    bottom: 30rem;
}

#carousel .flickity-page-dots .dot {
    background: transparent;
    border: 1px solid rgb(var(--white));
    opacity: 1;
}

#carousel .flickity-page-dots .dot.is-selected {
    background: rgb(var(--white));
}

/*--- cards ---*/
#cards .card {
    text-align: center;
    display: block;
    line-height: 1.7;
}

#cards h3 { color: rgb(var(--green)); }

#cards p {
    margin: 15rem 0 calc(22.5rem - 0.35em);
    padding: 0 30rem;
    font-size: var(--xs);
}

#cards .card > div {
    position: relative;
    width: 100%;
    aspect-ratio: 0.75;
    margin-bottom: 22.5rem;
}

#cards img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#cards .card .inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 30rem 30rem 20rem;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 130rem;
    color: rgba(var(--green), 0.85);
    background: linear-gradient(180deg, rgba(246, 245, 248, 0.4) 0%, #F6F5F8 100%);
    transition: all 0.3s ease;
}

#cards .card:hover .inner,
#cards .card:focus .inner { height: 80rem; }

#cards .card:hover .inner span,
#cards .card:focus .inner span {
    display: none;
}

#cards .card:hover .button,
#cards .card:focus .button {
    color: rgb(var(--white));
    background: rgb(var(--teal));
}

/*--- bio ---*/
#bio {
    padding: 75rem 0;
    color: rgb(var(--white));
    background: rgb(var(--teal-dark));
}

#bio h2 { color: rgb(var(--white)); }

#bio .leaf::after {
    border-color: rgb(var(--white));
}


/*---------------------------------------*/
/*--- A B O U T   T H E   G A R D E N ---*/
/*---------------------------------------*/

#about-the-garden h1 { margin-bottom: -30rem; }

#about-the-garden .national-garden-scheme ul,
#about-the-garden .special-tuesdays ul {
    column-count: 2;
}

#about-the-garden .national-garden-scheme ul li,
#about-the-garden .special-tuesdays ul li {
    margin-bottom: 5rem;
    overflow: hidden;
}

#about-the-garden .button.-v1 {
    margin-top: 60rem;
}


/*-------------------------*/
/*--- S H O P   L I S T ---*/
/*-------------------------*/

/*--- product filter ---*/
#shop-list #filters { margin-top: -30rem; }

#shop-list #filters .form {
    position: relative;
    padding: 30rem;
    border: 1px solid rgb(var(--grey-125));
}

#shop-list #filters .form .checkbox {
    justify-self: center;
}

#shop-list #filters .button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

/*--- product list ---*/
#shop-list #list {
    position: relative;
    margin: -45rem 0 60rem;
}

#shop-list #list.loading::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    z-index: 100;
    background-color: rgba(var(--white), 0.75);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#shop-list #list.loading::after {
    position: absolute;
    top: 0;
    left: calc(50% - 7.5vw);
    z-index: 100;
    content: 'progress_activity';
    font-family: 'Material Symbols Outlined';
    font-size: 15vw;
    color: rgb(var(--green));
    opacity: 0.75;
    animation: spin 1s linear infinite;
}

#shop-list .col-1-3 {
    container-type: inline-size;
}

#shop-list .item {
    position: relative;
    height: 100%;
    align-items: flex-start;
    padding: 30rem;
    background-color: rgba(var(--teal), 0.025);
    border: 1px solid rgb(var(--teal));
    border-radius: calc(30cqw + 30rem) 0;
    transition: 0.2s ease-in-out;
}

#shop-list .item .leaf::before {
    position: absolute;
    top: 15rem;
    width: 100%;
    height: 100%;
    left: 10rem;
    content: '';
    background: url('/images/dancing-lady.svg') center / 50% no-repeat rgb(var(--white));
    opacity: 0.5;
}

#shop-list .item .status,
#shop-details .status {
    position: absolute;
    top: -10rem;
    right: 10rem;
    min-width: 100rem;
    font-size: 11rem;
    font-weight: 700;
    color: rgb(var(--white));
    text-align: center;
    text-transform: uppercase;
    padding: 5rem 15rem;
    background-color: rgb(var(--grey));
    border-radius: 100rem;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
}

#shop-list .item .status.-on,
#shop-details .status.-on {
    background-color: rgb(var(--green-light));
}

#shop-list .item:hover {
    transform: scale(1.05);
}

#shop-list .item h3 {
    font-size: var(--s);
    font-weight: 600;
    line-height: 1.5;
    text-transform: unset;
}

#shop-list .item h3 span {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    text-transform: uppercase;
}

/*--- species list ---*/
#shop-list.species .item h3 {
    margin-top: 0;
}

/*--- course list ---*/
#shop-list.courses .item h2 {
    font-size: var(--m);
    font-weight: 500;
    text-transform: unset;
}

#shop-list.courses .item .text { flex-grow: 1; }

#shop-list.courses .item h3 { margin: 1em 0 -0.75em; }

#shop-list.courses .item p,
#shop-list.courses .item ul {
    display: -webkit-box;
    font-size: 0.9em;
    color: rgb(var(--teal));
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#shop-list.courses .item ul{ text-transform: uppercase; }

#shop-list.courses .item .no-spaces {
    color: rgb(var(--grey-500));
    text-decoration: line-through;
}

/*--- pagination ---*/
#pagination {
    display: flex;
    margin-top: 45rem;
    align-items: center;
    justify-content: center;
    gap: 15rem;
    font-size: var(--m);
}

#pagination .button {
    width: 45rem;
    min-width: unset;
    height: 45rem;
    min-height: unset;
    position: relative;
    background-color: transparent;
    border: 1px solid rgb(var(--green));
    border-radius: 45rem;
}

#pagination .button.-disabled {
    opacity: 0.25;
    filter: grayscale(1);
    cursor: default;
}

#pagination .button::after {
    position: absolute;
    top: 50%;
    left: -50%;
    display: block;
    transform: translateY(-50%) translateX(var(--translate-x, 0)) rotate(180deg);
    transition: all 0.3s ease;
}

#pagination .button::after {
    content: url('../images/icons/arrow-short.svg');
}

#pagination .button:not(.-disabled):hover::after {
    --translate-x: -10rem;
}

#pagination .button.-next {
    transform: rotate(180deg);
}


#pagination a {
    display: flex;
    min-width: 35rem;
    height: 35rem;
    justify-content: center;
    align-items: center;
    color: rgb(var(--grey-875));
    border-radius: 4rem;
}

#pagination a.-selected,
#pagination a:hover {
    background: rgba(var(--teal), 0.1);
    color: rgb(var(--green));
}

#pagination .-ellipsis + .-ellipsis {
    display: none;
}


/*-------------------------------*/
/*--- S H O P   D E T A I L S ---*/
/*-------------------------------*/

#shop-details .product-list {
    position: relative;
    margin-top: 30rem;
    padding: 90rem 60rem;
}

#shop-details .product-list:first-child::before {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 0;
    width: 100vw;
    content: '';
    transform: translateX(-50vw);
    border-bottom: 15rem solid rgb(var(--teal-dark));
}

#shop-details .product-list > div {
    position: relative;
}

#shop-details .product-list h1 {
    font-size: var(--l);
    font-weight: 600;
    text-transform: none;
    line-height: 1.2;
}

#shop-details .product-list h1 span {
    display: block;
    padding-top: 0.25em;
    font-size: 0.85em;
    font-weight: 400;
    line-height: inherit;
    text-transform: uppercase;
}

#shop-details .product-list h2 {
    margin-top: 45rem;
    font-size: var(--m);
    font-weight: 500;
    text-transform: none;
}

#shop-details .product-list h3 {
    font-size: var(--m);
    font-weight: 700;
    text-transform: none;
}

#shop-details .product-list ul {
    margin: 15rem -15rem 0 -15rem;
    border-top: 1px solid rgba(var(--teal), 0.125);
}

#shop-details .product-list ul li {
    position: relative;
    display: flex;
    min-height: calc(var(--m) + 45rem);
    padding: 22.5rem 15rem;
    gap: 30rem;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid rgba(var(--teal), 0.125);
}

#shop-details .product-list ul li:nth-child(odd) {
    background-color: rgba(var(--teal), 0.025);
}

#shop-details .product-list .price {
    max-width: 250rem;
    margin-top: 15rem;
    font-weight: 600;
    color: rgb(var(--teal));
    line-height: 1.5;
}

#shop-details .product-list .price span {
    font-size: 30rem;
}

#shop-details .product-list small {
    font-size: 0.75em;
    font-style: italic;
    line-height: 1.3;
    color: rgb(var(--grey-500));
}

#shop-details .product-list label {
    font-size: 0.75em;
    text-align: center;
}

.form input.quantity {
    width: 100rem;
    padding: 0.5em 1.0em 0.5em 1.75em;
    text-align: center;
    border-radius: 3em;
}

#shop-details .product-list .status {
    top: 27.5rem;
    right: 15rem;
}


/*-------------------------------------*/
/*--- S H O P P I N G   B A S K E T ---*/
/*-------------------------------------*/

#basket h2 {
    margin-top: 30rem;
    font-size: var(--m);
    text-transform: unset;
}

#basket table {
    width: 100%;
    margin-top: 60rem;
    border-top: 1px solid rgba(var(--teal), 0.125);
}

#basket table td {
    position: relative;
    padding: 15rem 15rem 15rem 15rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(var(--teal), 0.125);
}

#basket table td:nth-child(2) {
    width: 100%;
    white-space: wrap;
}

#basket table td:nth-child(4) {
    padding: 15rem 60rem;
}

#basket table td:nth-child(3)::after,
#basket table td:nth-child(5)::after {
    position: absolute;
    top: calc(50% - 0.5em);
    right: -60rem;
    width: 75rem;
    text-align: center;
    font-weight: 600;
    content: 'x';
}

#basket table td:nth-child(5)::after {
    content: '=';
    left: -60rem;
    right: unset;
}

#basket table tbody tr:nth-child(odd) td {
    background-color: rgb(var(--teal), 0.025);
}

#basket .leaf {
    width: 125rem;
}

#basket label {
    display: block;
    margin-bottom: 7.5rem;
    font-weight: 600;
}

/*-------------------*/
/*--- F O O T E R ---*/
/*-------------------*/

footer {
    padding-top: 30rem;
    padding-bottom: 15rem;
    background: rgba(var(--grey-light));
}

footer ul {
    display: flex;
    align-items: center;
    gap: 15rem;
}

footer a {
    text-decoration: underline;
}

footer .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15rem;
    border-bottom: 1px solid rgb(var(--grey-125));
}

footer .top > a img {
    width: 250rem;
}

footer .top ul img {
    height: 22.5rem;
}

footer .bottom {
    padding-top: 15rem;
    font-size: var(--xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .bottom ul li::before {
    padding-right: 15rem;
    content: "|";
}

footer .bottom ul li:first-child::before {
    content: unset;
}