/* ==========================================================================
   FragranceFiesta - Base CSS
   Ported from Shopify FragranceFiesta v1.2
   ========================================================================== */

/* Color Scheme Classes */
:root, .color-background-1 {
    --color-foreground: var(--color-base-text);
    --color-background: var(--color-base-background-1);
    --gradient-background: var(--gradient-base-background-1);
    --color-link: var(--color-base-outline-button-labels);
    --alpha-link: 0.85;
    --color-button: var(--color-base-accent-1);
    --color-button-text: var(--color-base-solid-button-labels);
    --alpha-button-background: 1;
    --alpha-button-border: 1;
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-foreground);
    --alpha-badge-border: 0.1;
    --color-card-hover: var(--color-base-text);
}

.color-background-2 {
    --color-foreground: var(--color-base-text);
    --color-background: var(--color-base-background-2);
    --gradient-background: var(--gradient-base-background-2);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-card-hover: var(--color-base-text);
}

.color-inverse {
    --color-foreground: var(--color-base-background-1);
    --color-background: var(--color-base-text);
    --gradient-background: rgb(var(--color-base-text));
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-card-hover: var(--color-base-background-1);
}

.color-accent-1 {
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-card-hover: var(--color-base-solid-button-labels);
}

.color-accent-2 {
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-2);
    --gradient-background: var(--gradient-base-accent-2);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-card-hover: var(--color-base-solid-button-labels);
}

/* Reset */
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; }

html {
    box-sizing: border-box;
    font-size: calc(var(--font-body-scale) * 62.5%);
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100%;
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.06rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
    color: rgba(var(--color-foreground), 0.75);
    background-color: rgb(var(--color-background));
}

img, span, table, tbody, button, ion-icon { display: block; }
button, input { font: inherit; background: none; border: none; }
button { cursor: pointer; }
address { font-style: normal; line-height: 1.8; }

@media screen and (min-width: 750px) {
    body { font-size: 1.6rem; }
}

::selection { background-color: rgba(var(--color-foreground), 0.2); }

/* Layout */
.page-width {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
    .page-width { padding: 0 2rem; }
    .page-width--narrow { padding: 0 9rem; }
}

@media screen and (min-width: 990px) {
    .page-width--narrow { max-width: 72.6rem; padding: 0; }
}

.isolate { position: relative; z-index: 0; }

.section + .section { margin-top: var(--spacing-sections-mobile); }
@media screen and (min-width: 750px) {
    .section + .section { margin-top: var(--spacing-sections-desktop); }
}

/* Utilities */
.hidden { display: none !important; }
.visually-hidden {
    position: absolute !important; overflow: hidden;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); word-wrap: normal !important;
}
.list-unstyled { margin: 0; padding: 0; list-style: none; }
.full-width-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.overflow-hidden { overflow: hidden; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.uppercase { text-transform: uppercase; }
.light { opacity: 0.7; }

@media screen and (max-width: 749px) { .small-hide { display: none !important; } }
@media screen and (min-width: 750px) and (max-width: 989px) { .medium-hide { display: none !important; } }
@media screen and (min-width: 990px) { .large-up-hide { display: none !important; } }

/* Typography */
.text-body {
    font-size: 1.5rem; letter-spacing: 0.06rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
    font-family: var(--font-body-family);
}

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
    color: rgb(var(--color-foreground));
    line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
    word-break: break-word;
}

.h0 { font-size: calc(var(--font-heading-scale) * 4rem); }
@media only screen and (min-width: 750px) { .h0 { font-size: calc(var(--font-heading-scale) * 5.2rem); } }

h1, .h1 { font-size: calc(var(--font-heading-scale) * 3rem); }
@media only screen and (min-width: 750px) { h1, .h1 { font-size: calc(var(--font-heading-scale) * 4rem); } }

h2, .h2 { font-size: calc(var(--font-heading-scale) * 2rem); }
@media only screen and (min-width: 750px) { h2, .h2 { font-size: calc(var(--font-heading-scale) * 2.4rem); } }

h3, .h3 { font-size: calc(var(--font-heading-scale) * 1.7rem); }
@media only screen and (min-width: 750px) { h3, .h3 { font-size: calc(var(--font-heading-scale) * 1.8rem); } }

h4, .h4 { font-size: calc(var(--font-heading-scale) * 1.5rem); }
h5, .h5 { font-size: calc(var(--font-heading-scale) * 1.2rem); }

.caption { font-size: 1rem; letter-spacing: 0.07rem; }
@media screen and (min-width: 750px) { .caption { font-size: 1.2rem; } }

.caption-large, .field__input, .form__label { font-size: 1.3rem; line-height: calc(1 + 0.5 / var(--font-body-scale)); letter-spacing: 0.04rem; }

/* Links */
.link {
    cursor: pointer; display: inline-block; border: none; box-shadow: none;
    text-decoration: none; text-underline-offset: 0.3rem;
    color: rgb(var(--color-link)); background-color: transparent;
    font-size: 1.6rem; font-family: inherit;
}
.link--text { color: rgb(var(--color-foreground)); }
.link--text:hover { color: rgba(var(--color-foreground), 0.75); }

/* Buttons */
.button {
    display: inline-flex; justify-content: center; align-items: center;
    border: 0; padding: 0 3rem; cursor: pointer;
    font: inherit; font-size: 1.5rem; text-decoration: none;
    color: rgb(var(--color-button-text));
    min-width: 12rem; min-height: 4.5rem;
    transition: box-shadow var(--duration-medium) ease;
    -webkit-appearance: none; appearance: none;
    position: relative; letter-spacing: 0.1rem;
}

.button::before {
    content: ""; position: absolute; inset: 0;
    background-color: rgb(var(--color-button));
    opacity: var(--alpha-button-background);
    border-radius: var(--buttons-radius-outset);
    z-index: -1;
}

.button::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: 0 0 0 calc(var(--buttons-border-width)) rgba(var(--color-button), var(--alpha-button-border)),
                0 0 0 var(--buttons-border-offset) rgba(var(--color-background),var(--alpha-button-background)),
                var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius) rgba(var(--color-shadow),var(--buttons-shadow-opacity));
    border-radius: var(--buttons-radius-outset);
}

.button--primary { --color-button: var(--color-base-accent-1); --color-button-text: var(--color-base-solid-button-labels); }
.button--primary:hover { opacity: 0.9; }

.button--secondary {
    --alpha-button-background: 0;
    --color-button: var(--color-base-outline-button-labels);
    --color-button-text: var(--color-base-outline-button-labels);
}
.button--secondary:hover {
    box-shadow: inset -18rem 0 0 0 var(--color-base-outline-hover-background-button-labels),
                inset 18rem 0 0 0 var(--color-base-outline-hover-background-button-labels);
    color: var(--color-base-outline-hover-button-labels);
}

.button--full-width { width: 100%; }

/* Grid */
.grid {
    display: flex; flex-wrap: wrap;
    margin-bottom: 2rem;
    gap: var(--grid-mobile-vertical-spacing) var(--grid-mobile-horizontal-spacing);
}

@media screen and (min-width: 750px) {
    .grid { gap: var(--grid-desktop-vertical-spacing) var(--grid-desktop-horizontal-spacing); }
}

.grid--1-col .grid__item { width: 100%; flex: 0 0 100%; max-width: 100%; }

.grid__item { flex-grow: 1; flex-shrink: 0; }

@media screen and (min-width: 750px) {
    .grid--2-col .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); flex: 0 0 auto; }
    .grid--3-col-tablet .grid__item { width: calc(33.333% - var(--grid-desktop-horizontal-spacing) * 2 / 3); flex: 0 0 auto; }
    .grid--4-col-tablet .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); flex: 0 0 auto; }
}

@media screen and (min-width: 990px) {
    .grid--4-col-desktop .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); flex: 0 0 auto; }
}

/* Section Subtitle (used across sections) */
.section-subtitle {
    font-size: calc(var(--font-heading-scale) * 4rem);
    text-transform: capitalize;
    margin-bottom: 0.5rem;
}

@media only screen and (min-width: 750px) {
    .section-subtitle { font-size: calc(var(--font-heading-scale) * 5.2rem); }
}

.section-header-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header-wrapper .h1 {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

/* Skip to content */
.skip-to-content-link:focus {
    z-index: 9999; position: inherit; overflow: auto;
    width: auto; height: auto; clip: auto;
}

/* Gradient background */
.gradient { background: var(--gradient-background); }

/* Media */
.media {
    display: block; background-color: rgba(var(--color-foreground), 0.04);
    position: relative; overflow: hidden;
}
.media > img {
    display: block; max-width: 100%; position: absolute;
    top: 0; left: 0; height: 100%; width: 100%; object-fit: cover;
}

/* Rte */
.rte a { color: rgba(var(--color-link), var(--alpha-link)); text-decoration: underline; }
.rte a:hover { color: rgb(var(--color-link)); }
.rte p { margin-bottom: 1rem; }

/* Focus */
.focus-inset:focus-visible { outline: 2px solid rgba(var(--color-foreground),0.5); outline-offset: -2px; }

/* Forms / fields */
.field { position: relative; width: 100%; display: flex; }
.field__input {
    flex-grow: 1; text-align: left; border: 0; padding: 1.5rem;
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none; appearance: none;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem; width: 100%;
    box-sizing: border-box;
    border-radius: var(--inputs-radius);
    border: var(--inputs-border-width) solid rgba(var(--color-foreground), var(--inputs-border-opacity));
}
.field__input:focus { box-shadow: 0 0 0 2px rgb(var(--color-foreground)); outline: 0; }
.field__button {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 0; bottom: 0;
    padding: 0 1.8rem; background: transparent; border: 0; cursor: pointer;
    color: rgb(var(--color-foreground));
}
.field__label {
    position: absolute; left: var(--inputs-border-width); top: calc(var(--inputs-border-width));
    pointer-events: none; font-size: 1.3rem; letter-spacing: 0.04rem;
    line-height: calc(1 + 0.5 / var(--font-body-scale));
    padding: 1.5rem;
    color: rgba(var(--color-foreground), 0.75);
    transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label {
    font-size: 1rem; top: calc(var(--inputs-border-width) + 0.5rem);
    letter-spacing: 0.04rem;
}

/* Placeholder */
.placeholder { background-color: #F6F6F0; color: #C25B41; fill: black; opacity: 0.95; }

/* Duration variables */
@media (prefers-reduced-motion) {
    .motion-reduce { transition: none !important; animation: none !important; }
}

/* Padding utility */
.section-padding {
    padding-top: 27px;
    padding-bottom: 27px;
}
@media screen and (min-width: 750px) {
    .section-padding {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}