/*
 * exo-settings.css -- EXOTICSDISPO (WooCommerce port of the Shopify Dawn 15.4 theme)
 * Everything Dawn prints INLINE in <head> before any stylesheet, transcribed from the live
 * homepage (theme-src/live-html/home.inline.css, 2026-10-08):
 *   1. @font-face Inter (self-hosted: assets/fonts/, same woff2 files the Shopify CDN served)
 *   2. :root / .color-scheme-N custom properties from config/settings_data.json
 *   3. :root font + layout tokens (--font-body-family, --page-width, card/button radii ...)
 *   4. the box-sizing reset, html font-size and body grid rules
 *   5. theme.liquid critical inline CSS (body colours, .exo-hero, .exo-marquee, .drawer ...)
 * Loaded FIRST by functions.php. Do not add overrides here -- use exo-wp.css.
 */
@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/inter_i4.feae1981dda792ab80d117249d9c7e0f1017e5b3.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/inter_i7.b377bcd4cc0f160622a22d638ae7e2cd9b86ea4c.woff2") format("woff2");
}
:root,
  .color-scheme-1 {
    --color-background: 250,250,250;
  
    --gradient-background: #fafafa;
  

  

  --color-foreground: 26,26,26;
  --color-background-contrast: 186,186,186;
  --color-shadow: 26,26,26;
  --color-button: 123,45,139;
  --color-button-text: 255,255,255;
  --color-secondary-button: 250,250,250;
  --color-secondary-button-text: 123,45,139;
  --color-link: 123,45,139;
  --color-badge-foreground: 26,26,26;
  --color-badge-background: 250,250,250;
  --color-badge-border: 26,26,26;
  --payment-terms-background-color: rgb(250 250 250);
}

  
  .color-scheme-2 {
    --color-background: 245,245,245;
  
    --gradient-background: #f5f5f5;
  

  

  --color-foreground: 26,26,26;
  --color-background-contrast: 181,181,181;
  --color-shadow: 26,26,26;
  --color-button: 123,45,139;
  --color-button-text: 255,255,255;
  --color-secondary-button: 245,245,245;
  --color-secondary-button-text: 123,45,139;
  --color-link: 123,45,139;
  --color-badge-foreground: 26,26,26;
  --color-badge-background: 245,245,245;
  --color-badge-border: 26,26,26;
  --payment-terms-background-color: rgb(245 245 245);
}

  
  .color-scheme-3 {
    --color-background: 26,26,26;
  
    --gradient-background: #1a1a1a;
  

  

  --color-foreground: 255,255,255;
  --color-background-contrast: 154,154,154;
  --color-shadow: 0,0,0;
  --color-button: 123,45,139;
  --color-button-text: 255,255,255;
  --color-secondary-button: 26,26,26;
  --color-secondary-button-text: 255,255,255;
  --color-link: 255,255,255;
  --color-badge-foreground: 255,255,255;
  --color-badge-background: 26,26,26;
  --color-badge-border: 255,255,255;
  --payment-terms-background-color: rgb(26 26 26);
}

  
  .color-scheme-4 {
    --color-background: 0,0,0;
  
    --gradient-background: #000000;
  

  

  --color-foreground: 255,255,255;
  --color-background-contrast: 128,128,128;
  --color-shadow: 0,0,0;
  --color-button: 123,45,139;
  --color-button-text: 255,255,255;
  --color-secondary-button: 0,0,0;
  --color-secondary-button-text: 255,255,255;
  --color-link: 255,255,255;
  --color-badge-foreground: 255,255,255;
  --color-badge-background: 0,0,0;
  --color-badge-border: 255,255,255;
  --payment-terms-background-color: rgb(0 0 0);
}

  
  .color-scheme-5 {
    --color-background: 123,45,139;
  
    --gradient-background: #7b2d8b;
  

  

  --color-foreground: 255,255,255;
  --color-background-contrast: 38,14,43;
  --color-shadow: 0,0,0;
  --color-button: 255,255,255;
  --color-button-text: 123,45,139;
  --color-secondary-button: 123,45,139;
  --color-secondary-button-text: 255,255,255;
  --color-link: 255,255,255;
  --color-badge-foreground: 255,255,255;
  --color-badge-background: 123,45,139;
  --color-badge-border: 255,255,255;
  --payment-terms-background-color: rgb(123 45 139);
}


body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

:root {
  --font-body-family: Inter, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;

  --font-heading-family: Inter, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 700;

  --font-body-scale: 1.0;
  --font-heading-scale: 1.0;

  --media-padding: px;
  --media-border-opacity: 0.05;
  --media-border-width: 1px;
  --media-radius: 12px;
  --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: 140rem;
  --page-width-margin: 0rem;

  --product-card-image-padding: 0.0rem;
  --product-card-corner-radius: 1.2rem;
  --product-card-text-alignment: left;
  --product-card-border-width: 0.0rem;
  --product-card-border-opacity: 0.1;
  --product-card-shadow-opacity: 0.1;
  --product-card-shadow-visible: 1;
  --product-card-shadow-horizontal-offset: 0.0rem;
  --product-card-shadow-vertical-offset: 0.4rem;
  --product-card-shadow-blur-radius: 2.0rem;

  --collection-card-image-padding: 0.0rem;
  --collection-card-corner-radius: 1.2rem;
  --collection-card-text-alignment: left;
  --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: 1.2rem;
  --blog-card-text-alignment: left;
  --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: 1px;
  --popup-border-opacity: 0.1;
  --popup-corner-radius: 12px;
  --popup-shadow-opacity: 0.05;
  --popup-shadow-horizontal-offset: 0px;
  --popup-shadow-vertical-offset: 4px;
  --popup-shadow-blur-radius: 5px;

  --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: 100px;
  --spacing-sections-mobile: 70px;

  --grid-desktop-vertical-spacing: 20px;
  --grid-desktop-horizontal-spacing: 20px;
  --grid-mobile-vertical-spacing: 10px;
  --grid-mobile-horizontal-spacing: 10px;

  --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: 24px;
  --buttons-radius-outset: 24px;
  --buttons-border-width: 0px;
  --buttons-border-opacity: 1.0;
  --buttons-shadow-opacity: 0.0;
  --buttons-shadow-visible: 0;
  --buttons-shadow-horizontal-offset: 0px;
  --buttons-shadow-vertical-offset: 4px;
  --buttons-shadow-blur-radius: 5px;
  --buttons-border-offset: 0.3px;

  --inputs-radius: 12px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 0.55;
  --inputs-shadow-opacity: 0.0;
  --inputs-shadow-horizontal-offset: 0px;
  --inputs-margin-offset: 0px;
  --inputs-shadow-vertical-offset: 4px;
  --inputs-shadow-blur-radius: 5px;
  --inputs-radius-outset: 13px;

  --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;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

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);
}

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


/* ==== theme.liquid inline (critical) ==== */
body { background-color: #FAFAFA; color: #1a1a1a; }
      .exo-hero { position: relative; overflow: hidden; opacity: 1; transform: none; }
      .exo-marquee { min-height: 50px; overflow: hidden; }
      #exotics-age-gate { contain: layout style; }
      .exo-header { position: sticky; top: 0; z-index: 1000; }
      cart-drawer { position: fixed; top: 0; left: 0; }

#RewardUp-widget-btn {
    left: 20px !important;
    right: auto !important;
  }
  #RewardUp-customer-website {
    left: 20px !important;
    right: auto !important;
  }

.drawer {
    visibility: hidden;
  }