/* Foundational rules (fonts, html/body reset, .list-menu) that every legacy per-page
   bundle duplicates but that base.css never got. Loaded globally so pages with no
   legacy bundle (dynamic shop/category and product-detail pages) get them too. */

@font-face {
    font-family: "Crimson Pro";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../../assets/fonts/crimson_pro/crimsonpro_n4.af7e5f35fb5e103ddb0d48d62eeb24849e95bc7d.woff2") format("woff2"), url("../../assets/fonts/crimson_pro/crimsonpro_n4.3fe4f48589996a4db104f3df11cb1025be6f4749.woff") format("woff");
}

@font-face {
    font-family: "Crimson Pro";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../../assets/fonts/crimson_pro/crimsonpro_n7.3f6def36c6cd2e6095f8b9560fce03a4b80105cd.woff2") format("woff2"), url("../../assets/fonts/crimson_pro/crimsonpro_n7.08e31cc6ca54bcba7614c30acf65d3c245be8609.woff") format("woff");
}

@font-face {
    font-family: "Crimson Pro";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("../../assets/fonts/crimson_pro/crimsonpro_i4.02f719ced271fbbb0440f63724bb2734e61b9674.woff2") format("woff2"), url("../../assets/fonts/crimson_pro/crimsonpro_i4.00daf41d6169cca4469a7a8a4c3c78c0aa94f738.woff") format("woff");
}

@font-face {
    font-family: "Crimson Pro";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url("../../assets/fonts/crimson_pro/crimsonpro_i7.491ed70b28c452ddc9cb8313cf00f19fbc041c5c.woff2") format("woff2"), url("../../assets/fonts/crimson_pro/crimsonpro_i7.6da291813be7f6d1a2727f81880326c5a1fa7e19.woff") format("woff");
}

@font-face {
    font-family: "Cedarville Cursive";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../../assets/fonts/cedarville_cursive/cedarvillecursive_n4.8314fa4d4b3cd48e45390e0262d610be3e7c8f9f.woff2") format("woff2"), url("../../assets/fonts/cedarville_cursive/cedarvillecursive_n4.cca42c431f388be0aaaf8bbe37efb75d804408e7.woff") format("woff");
}

 :root,
.color-scheme-1 {
    --color-background: 244, 244, 243;
    --gradient-background: #f4f4f3;
    --color-foreground: 107, 10, 107;
    --color-background-contrast: 183, 183, 176;
    --color-shadow: 16, 57, 72;
    --color-button: 187, 15, 15;
    --color-button-text: 244, 234, 174;
    --color-secondary-button: 244, 244, 243;
    --color-secondary-button-text: 5, 44, 70;
    --color-link: 5, 44, 70;
    --color-badge-foreground: 107, 10, 107;
    --color-badge-background: 244, 244, 243;
    --color-badge-border: 107, 10, 107;
    --payment-terms-background-color: rgb(244 244 243);
}

.color-scheme-2 {
    --color-background: 255, 255, 255;
    --gradient-background: #ffffff;
    --color-foreground: 187, 15, 15;
    --color-background-contrast: 191, 191, 191;
    --color-shadow: 244, 234, 174;
    --color-button: 122, 67, 137;
    --color-button-text: 235, 236, 237;
    --color-secondary-button: 255, 255, 255;
    --color-secondary-button-text: 187, 15, 15;
    --color-link: 187, 15, 15;
    --color-badge-foreground: 187, 15, 15;
    --color-badge-background: 255, 255, 255;
    --color-badge-border: 187, 15, 15;
    --payment-terms-background-color: rgb(255 255 255);
}

.color-scheme-3 {
    --color-background: 16, 57, 72;
    --gradient-background: #103948;
    --color-foreground: 252, 252, 252;
    --color-background-contrast: 21, 74, 93;
    --color-shadow: 16, 57, 72;
    --color-button: 252, 252, 252;
    --color-button-text: 16, 57, 72;
    --color-secondary-button: 16, 57, 72;
    --color-secondary-button-text: 252, 252, 252;
    --color-link: 252, 252, 252;
    --color-badge-foreground: 252, 252, 252;
    --color-badge-background: 16, 57, 72;
    --color-badge-border: 252, 252, 252;
    --payment-terms-background-color: rgb(16 57 72);
}

.color-scheme-4 {
    --color-background: 188, 86, 49;
    --gradient-background: #bc5631;
    --color-foreground: 252, 252, 252;
    --color-background-contrast: 87, 40, 23;
    --color-shadow: 16, 57, 72;
    --color-button: 252, 252, 252;
    --color-button-text: 188, 86, 49;
    --color-secondary-button: 188, 86, 49;
    --color-secondary-button-text: 252, 252, 252;
    --color-link: 252, 252, 252;
    --color-badge-foreground: 252, 252, 252;
    --color-badge-background: 188, 86, 49;
    --color-badge-border: 252, 252, 252;
    --payment-terms-background-color: rgb(188 86 49);
}

.color-scheme-5 {
    --color-background: 24, 86, 108;
    --gradient-background: #18566c;
    --color-foreground: 252, 252, 252;
    --color-background-contrast: 1, 3, 4;
    --color-shadow: 16, 57, 72;
    --color-button: 252, 252, 252;
    --color-button-text: 24, 86, 108;
    --color-secondary-button: 24, 86, 108;
    --color-secondary-button-text: 252, 252, 252;
    --color-link: 252, 252, 252;
    --color-badge-foreground: 252, 252, 252;
    --color-badge-background: 24, 86, 108;
    --color-badge-border: 252, 252, 252;
    --payment-terms-background-color: rgb(24 86 108);
}

.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e {
    --color-background: 107, 10, 107;
    --gradient-background: #6b0a6b;
    --color-foreground: 244, 234, 174;
    --color-background-contrast: 130, 12, 130;
    --color-shadow: 16, 57, 72;
    --color-button: 244, 234, 174;
    --color-button-text: 122, 67, 137;
    --color-secondary-button: 107, 10, 107;
    --color-secondary-button-text: 5, 44, 70;
    --color-link: 5, 44, 70;
    --color-badge-foreground: 244, 234, 174;
    --color-badge-background: 107, 10, 107;
    --color-badge-border: 244, 234, 174;
    --payment-terms-background-color: rgb(107 10 107);
}

body,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5,
.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e {
    color: rgb(170 11 11);
    background-color: rgb(var(--color-background));
}

 :root {
    --font-body-family: "Crimson Pro", serif;
    --font-body-style: normal;
    --font-body-weight: 400;
    --font-body-weight-bold: 700;
    --font-heading-family: "Abril Fatface", serif;
    --font-heading-style: normal;
    --font-heading-weight: 400;
    --font-body-scale: 1.1;
    --font-heading-scale: 1.0909090909090908;
    --media-padding: px;
    --media-border-opacity: 0.1;
    --media-border-width: 0px;
    --media-radius: 0px;
    --media-shadow-opacity: 0.0;
    --media-shadow-horizontal-offset: 0px;
    --media-shadow-vertical-offset: 4px;
    --media-shadow-blur-radius: 5px;
    --media-shadow-visible: 0;
    --page-width: 120rem;
    --page-width-margin: 0rem;
    --product-card-image-padding: 0.0rem;
    --product-card-corner-radius: 0.0rem;
    --product-card-text-alignment: center;
    --product-card-border-width: 0.0rem;
    --product-card-border-opacity: 0.1;
    --product-card-shadow-opacity: 0.0;
    --product-card-shadow-visible: 0;
    --product-card-shadow-horizontal-offset: 0.0rem;
    --product-card-shadow-vertical-offset: 0.4rem;
    --product-card-shadow-blur-radius: 0.5rem;
    --collection-card-image-padding: 0.0rem;
    --collection-card-corner-radius: 0.0rem;
    --collection-card-text-alignment: center;
    --collection-card-border-width: 0.0rem;
    --collection-card-border-opacity: 0.1;
    --collection-card-shadow-opacity: 0.0;
    --collection-card-shadow-visible: 0;
    --collection-card-shadow-horizontal-offset: 0.0rem;
    --collection-card-shadow-vertical-offset: 0.4rem;
    --collection-card-shadow-blur-radius: 0.5rem;
    --blog-card-image-padding: 0.0rem;
    --blog-card-corner-radius: 0.0rem;
    --blog-card-text-alignment: center;
    --blog-card-border-width: 0.0rem;
    --blog-card-border-opacity: 0.1;
    --blog-card-shadow-opacity: 0.0;
    --blog-card-shadow-visible: 0;
    --blog-card-shadow-horizontal-offset: 0.0rem;
    --blog-card-shadow-vertical-offset: 0.4rem;
    --blog-card-shadow-blur-radius: 0.5rem;
    --badge-corner-radius: 4.0rem;
    --popup-border-width: 0px;
    --popup-border-opacity: 0.1;
    --popup-corner-radius: 0px;
    --popup-shadow-opacity: 0.1;
    --popup-shadow-horizontal-offset: 6px;
    --popup-shadow-vertical-offset: 6px;
    --popup-shadow-blur-radius: 25px;
    --drawer-border-width: 1px;
    --drawer-border-opacity: 0.1;
    --drawer-shadow-opacity: 0.0;
    --drawer-shadow-horizontal-offset: 0px;
    --drawer-shadow-vertical-offset: 4px;
    --drawer-shadow-blur-radius: 5px;
    --spacing-sections-desktop: 0px;
    --spacing-sections-mobile: 0px;
    --grid-desktop-vertical-spacing: 40px;
    --grid-desktop-horizontal-spacing: 8px;
    --grid-mobile-vertical-spacing: 20px;
    --grid-mobile-horizontal-spacing: 4px;
    --text-boxes-border-opacity: 0.1;
    --text-boxes-border-width: 0px;
    --text-boxes-radius: 0px;
    --text-boxes-shadow-opacity: 0.0;
    --text-boxes-shadow-visible: 0;
    --text-boxes-shadow-horizontal-offset: 0px;
    --text-boxes-shadow-vertical-offset: 4px;
    --text-boxes-shadow-blur-radius: 5px;
    --buttons-radius: 40px;
    --buttons-radius-outset: 41px;
    --buttons-border-width: 1px;
    --buttons-border-opacity: 1.0;
    --buttons-shadow-opacity: 0.1;
    --buttons-shadow-visible: 1;
    --buttons-shadow-horizontal-offset: 2px;
    --buttons-shadow-vertical-offset: 2px;
    --buttons-shadow-blur-radius: 5px;
    --buttons-border-offset: 0.3px;
    --inputs-radius: 2px;
    --inputs-border-width: 1px;
    --inputs-border-opacity: 0.15;
    --inputs-shadow-opacity: 0.05;
    --inputs-shadow-horizontal-offset: 2px;
    --inputs-margin-offset: 2px;
    --inputs-shadow-vertical-offset: 2px;
    --inputs-shadow-blur-radius: 5px;
    --inputs-radius-outset: 3px;
    --variant-pills-radius: 40px;
    --variant-pills-border-width: 1px;
    --variant-pills-border-opacity: 0.55;
    --variant-pills-shadow-opacity: 0.0;
    --variant-pills-shadow-horizontal-offset: 0px;
    --variant-pills-shadow-vertical-offset: 4px;
    --variant-pills-shadow-blur-radius: 5px;
}

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

body {
    display: flex;
    flex-direction: column;
    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);
}

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

.list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;
}

summary.list-menu__item {
    padding-right: 2.7rem;
}

.list-menu__item {
    display: flex;
    align-items: center;
    line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.list-menu__item--link {
    text-decoration: none;
    padding-bottom: 1rem;
    padding-top: 1rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
}

/* ==========================================================================
   Flash / validation toast notifications (.uj-toast)
   Sitewide floating popup used for the global session('success') /
   session('error') flash (see layouts/storefront.blade.php) AND the
   validation-error list shared by the "Got a Query?" homepage section and
   the /pages/contact form (both post to the same route -- see
   App\Http\Controllers\ContactController::store()). Rendered once, in the
   shared layout, so it works on every page without per-page CSS/markup.
   Auto-dismisses after a few seconds (see the inline script in the
   layout); still fully visible with no auto-dismiss if JS never runs.
   ========================================================================== */
.uj-toast-stack {
    position: fixed;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 38rem;
    width: calc(100% - 3.2rem);
    pointer-events: none;
}

.uj-toast {
    pointer-events: auto;
    background: var(--jewel-card, #fffdfa);
    border-radius: var(--jewel-radius-card, 14px);
    box-shadow: 0 12px 32px rgba(43, 36, 29, 0.18), 0 2px 8px rgba(43, 36, 29, 0.08);
    padding: 1.6rem 1.8rem;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    border-left: 4px solid transparent;
    animation: uj-toast-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.uj-toast--success { border-left-color: #1e7b45; }
.uj-toast--error { border-left-color: var(--jewel-maroon, #6d1730); }

.uj-toast__icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    color: #fff;
}
.uj-toast--success .uj-toast__icon { background: #1e7b45; }
.uj-toast--error .uj-toast__icon { background: var(--jewel-maroon, #6d1730); }

.uj-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.uj-toast__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--jewel-charcoal, #2b241d);
    margin: 0 0 0.3rem;
}

.uj-toast__message {
    font-size: 1.3rem;
    color: var(--jewel-charcoal-soft, rgba(43, 36, 29, 0.75));
    margin: 0;
    line-height: 1.5;
}

.uj-toast__message ul {
    margin: 0;
    padding-left: 1.6rem;
}

.uj-toast__message li {
    margin-bottom: 0.2rem;
}

.uj-toast__close {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--jewel-charcoal-soft, rgba(43, 36, 29, 0.5));
    padding: 0.2rem;
}

.uj-toast__close:hover {
    color: var(--jewel-charcoal, #2b241d);
}

.uj-toast--leaving {
    animation: uj-toast-out 0.3s ease forwards;
}

@keyframes uj-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes uj-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
    .uj-toast { animation: none; }
    .uj-toast--leaving { animation: none; opacity: 0; }
}

@media screen and (max-width: 749px) {
    .uj-toast-stack {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
}