:root {


    /* Ground & ink */
    --white: #FFFFFF;      /* The ground. Cards, bar, basket */
    --ink: #231E2A;        /* All primary type and structural rules */
    --mauve-grey: #6B6572; /* Secondary type, captions, empty states */
    --rule: rgba(35, 30, 42, 0.09); /* structural hairlines */
    --rule-soft: rgba(35, 30, 42, 0.05); /* rules inside a card */

    /* Lavender accent */
    --wash: #F3F1F9; /* Image plates. The backdrop to every cut-out */
    --line: #CBC2E1; /* Hover borders. Non-text only */
    --lavender: #655693; /* The card band, links, focus rings, every interaction */


}


@font-face {
    font-family: "Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("./assets/EBGaramond-Regular.ttf") format("truetype");
}

* {
    touch-action: manipulation;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none; 
}

html {
    font-size: 24px;
}

aloe-label {
    font-family: "Garamond";
}

aloe-button {
    color: var(--lavender) !important;
    color: maroon !important;
    background-color: transparent !important;
}

/* Aloe's frame centres everything vertically, which on a short page (an empty basket,
   the thank-you page) pushed the top bar down from the top of the screen. */
body.aloe-frame {
    justify-content: flex-start;
}

/* ---- form controls: how every AloeInput and AloeSelect looks on this site ----
   (body in front so these beat the plain defaults Aloe injects later) */

body aloe-input,
body aloe-select {
    background-color: transparent;
}

body aloe-input label,
body aloe-select label {
    font-family: "Garamond";
    font-size: 0.8rem;
    color: var(--mauve-grey);
    padding: 0 0 0.2rem 0;
}

/* 1rem or bigger keeps iOS from zooming in on focus */
body aloe-input input,
body aloe-select select {
    font-family: "Garamond";
    font-size: 1rem;
    color: var(--ink);
    background-color: var(--white);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.5rem 0.6rem;
    min-height: 2.6rem;
    appearance: none;
    -webkit-appearance: none;
}

body aloe-select select {
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.8rem) 55%;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

body aloe-input input:focus,
body aloe-select select:focus {
    border-color: var(--lavender);
    outline: 2px solid var(--line);
}

body aloe-input input[aria-invalid="true"],
body aloe-select select[aria-invalid="true"] {
    border-color: maroon;
}

body aloe-input small,
body aloe-select small {
    font-family: "Garamond";
    font-size: 0.75rem;
}

/* ---- shared pieces, used by every view ---- */

.page {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: 1rem 0.75rem 3rem 0.75rem;
}

aloe-label.title {
    white-space: normal;
    width: auto;
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--ink);
}

aloe-label.muted {
    white-space: normal;
    width: auto;
    color: var(--mauve-grey);
}

.card {
    background-color: var(--white);
    border: 1px solid var(--rule);
}

aloe-button.primary {
    background-color: maroon !important;
    color: var(--white) !important;
    padding: 0.7rem 1.1rem;
}

aloe-button.secondary {
    border: 1px solid maroon;
    padding: 0.6rem 1rem;
}

aloe-button.link {
    padding: 0;
    text-decoration: underline;
}

aloe-button.block {
    width: 100%;
    box-sizing: border-box;
}

/* Everything is sized in rem, so on a phone the whole UI follows the root size below.
   The top bar and the product cards have their own scale on top of it:
   --topbar-scale 1.2222 keeps the top bar the size it was at 22px (22 / 18),
   --card-scale makes the product cards bigger than the rest. Both are 1 on desktop. */
:root {
    --topbar-scale: 1;
    --card-scale: 1;
}

@media (orientation: portrait) {
    :root {
        --topbar-scale: 1.2222;
        --card-scale: 1.4;
    }
    html {
        font-size: 18px;
    } 
    mrhc-product-grid {
        padding: 0px !important;
    }
}