/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main_ecommerce/_main_ecommerce.scss ***!
  \***********************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);
/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main_ecommerce/_main_ecommerce.scss (1) ***!
  \***************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap);
/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/fonts/blacker_pro_text.css ***!
  \*****************************************************************************************/
@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-bold-italic-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-bold-italic-webfont.woff) format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-bold-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-bold-webfont.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-book-italic-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-book-italic-webfont.woff) format("woff");
  font-weight: 375;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-book-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-book-webfont.woff) format("woff");
  font-weight: 375;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-heavy-italic-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-heavy-italic-webfont.woff) format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-heavy-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-heavy-webfont.woff) format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-italic-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-italic-webfont.woff) format("woff");
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-light-italic-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-light-italic-webfont.woff) format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-light-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-light-webfont.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-medium-italic-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-medium-italic-webfont.woff) format("woff");
  font-weight: 530;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-medium-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-medium-webfont.woff) format("woff");
  font-weight: 530;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Blacker pro text";
  src: url(../fonts/blacker-pro-text-regular-webfont.woff2) format("woff2"),
       url(../fonts/blacker-pro-text-regular-webfont.woff) format("woff");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}

/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main_ecommerce/_main_ecommerce.scss (2) ***!
  \***************************************************************************************************************************************************************************************/
/** ***************************************************************************
 * Conchiglia E-commerce main stylesheet
 *************************************************************************** */
/** ***************************************************************************
 * Conchiglia Common design tokens
 *************************************************************************** */
/** ***************************************************************************
 * Conchiglia SASS utilities
 *************************************************************************** */
/* Function for converting a px based font-size to rem. */
/* This is useful to use variables in JS files */
:export {
  xs: 0;
  sm: 37.5rem;
  md: 48rem;
  lg: 64rem;
  xl: 80rem;
  xxl: 90rem;
  xxxl: 120rem;
}

/** ***********************************************************************************
 * Typography design tokens
 *********************************************************************************** */
/**
 * PP Neue Montreal font definition
 * see https://pangrampangram.com/products/neue-montreal
 */
@font-face {
  font-family: "PPNeueMontreal";
  src: url(../fonts/PPNeueMontreal-Variable.woff2) format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}
@font-face {
  font-family: "PPNeueMontreal Book";
  src: url(../fonts/PPNeueMontreal-Book.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PPNeueMontreal Book Italic";
  src: url(../fonts/PPNeueMontreal-BookItalic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
}
/**
 * Euclid Circular B font definition
 * see https://www.swisstypefaces.com/fonts/euclid/#Circular%20B
 */
@font-face {
  font-family: "EuclidCircularB";
  src: url(../fonts/EuclidCircularB-Medium-WebS.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
}
:root {
  /**
    * @tokens Font families
    * @presenter FontFamily
    */
  --cn-global--FontFamily-sans: "PPNeueMontreal", "Poppins", sans-serif;
  --cn-global--FontFamily-book: "PPNeueMontreal Book", "Poppins", sans-serif;
  --cn-global--FontFamily-serif: "Blacker pro text", "Noto Serif", serif;
  --cn-global--FontFamily-default: var(--cn-global--FontFamily-sans);
  /**
    * @tokens Font weights
    * @presenter FontWeight
    */
  --cn-global--FontWeight-thin: 100; /* Thin */
  --cn-global--FontWeight-light: 300; /* Light */
  --cn-global--FontWeight-book-regular: 375; /* Book Regular */
  --cn-global--FontWeight-regular: 450; /* Regular */
  --cn-global--FontWeight-medium: 530; /* Medium */
  --cn-global--FontWeight-semibold: 700; /* Semibold */
  --cn-global--FontWeight-bold: 800; /* Bold */
  --cn-global--FontWeight-heavy: 900; /* Heavy */
  /**
    * @tokens Article font sizes
    * @presenter FontSize
    */
  --cn-global--FontSize-label--xxs: 0.625rem;
  --cn-global--FontSize-label--xs: 0.875rem;
  --cn-global--FontSize-label--sm: 1rem;
  --cn-global--FontSize-label--md: 1.125rem;
  --cn-global--FontSize-label--lg: 1.4375rem;
  --cn-global--FontSize-label--xl: 1.875rem;
  --cn-global--FontSize-paragraph--sm: 1.125rem;
  --cn-global--FontSize-paragraph--md: 1.625rem;
  --cn-global--FontSize-title--md: 1.5625rem;
  --cn-global--FontSize-title--2xl: 3.125rem;
  --cn-global--FontSize-title--3xl: 4.375rem;
  /**
    * @tokens Text styles
    * https://developer.mozilla.org/en-US/docs/Web/CSS/font#formal_syntax
    */
  --cn-global--Font-label--xxs-medium: var(--cn-global--FontWeight-medium) var(--cn-global--FontSize-label--xxs) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xs-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-label--xs) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xs-book: var(--cn-global--FontWeight-book-regular) var(--cn-global--FontSize-label--xs) var(--cn-global--FontFamily-book);
  --cn-global--Font-label--xs-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--xs) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--sm-book: var(--cn-global--FontWeight-book-regular) var(--cn-global--FontSize-label--sm) var(--cn-global--FontFamily-book);
  --cn-global--Font-label--sm-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-label--sm)/var(--cn-global--LineHeight-sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--sm-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-light: var(--cn-global--FontWeight-light) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-medium: var(--cn-global--FontWeight-medium) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--lg-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--lg) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xl-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--xl) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xl-bold: var(--cn-global--FontWeight-bold) var(--cn-global--FontSize-label--xl) var(--cn-global--FontFamily-default);
  --cn-global--Font-paragraph--sm-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-paragraph--sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-paragraph--md-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-paragraph--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--md-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--2xl-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--2xl) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--3xl-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--3xl) var(--cn-global--FontFamily-default);
  /**
    * @tokens Line heights
    * @presenter LineHeight
    */
  --cn-global--LineHeight-sm: 1.375; /* Small (paragraph) */
  --cn-global--LineHeight-md: 1.45; /* Medium (label) */
  --cn-global--LineHeight-2xl: 4.625rem;
}

/** ***********************************************************************************
 * Common color design tokens
 *********************************************************************************** */
:root {
  /**
   * @tokens Orphan colors
   * @presenter Color
   */
  /** White: #fff */
  --cn-global--palette-white--100: rgba(255, 255, 255, 1); /* White / 100% */
  --cn-global--palette-white--80: rgba(255, 255, 255, .8); /* White / 80% */
  --cn-global--palette-white--73: rgba(255, 255, 255, .73); /* White / 73% */
  --cn-global--palette-white--60: rgba(255, 255, 255, .6); /* White / 60% */
  --cn-global--palette-white--30: rgba(255, 255, 255, .3); /* White / 30% */
  --cn-global--palette-white: var(--cn-global--palette-white--100);
  /** Red: #e61425 */
  --cn-global--palette-red--100: rgba(230, 20, 37, 1); /* Red / 100% */
  --cn-global--palette-red--80: rgba(230, 20, 37, .8); /* Red / 80% */
  --cn-global--palette-red--65: rgba(230, 20, 37, .65); /* Red / 65% */
  --cn-global--palette-red: var(--cn-global--palette-red--100);
  /**
   * @tokens Primary colors
   * @presenter Color
   */
  /** Black: #282828 */
  --cn-global--palette-black--03: rgba(40, 40, 40, .03); /* Black / 3% */
  --cn-global--palette-black--10: rgba(40, 40, 40, .1); /* Black / 10% */
  --cn-global--palette-black--15: rgba(40, 40, 40, .15); /* Black / 15% */
  --cn-global--palette-black--25: rgba(40, 40, 40, .25); /* Black / 25% */
  --cn-global--palette-black--30: rgba(40, 40, 40, .3); /* Black / 30% */
  --cn-global--palette-black--40: rgba(40, 40, 40, .4); /* Black / 40% */
  --cn-global--palette-black--50: rgba(40, 40, 40, .5); /* Black / 50% */
  --cn-global--palette-black--60: rgba(40, 40, 40, .6); /* Black / 60% */
  --cn-global--palette-black--67: rgba(40, 40, 40, .67); /* Black / 60% */
  --cn-global--palette-black--70: rgba(40, 40, 40, .7); /* Black / 70% */
  --cn-global--palette-black--80: rgba(40, 40, 40, .8); /* Black / 80% */
  --cn-global--palette-black--100: rgba(40, 40, 40, 1); /* Black / 100% */
  --cn-global--palette-black: var(--cn-global--palette-black--100);
  /** Dark gray: #2f2f2f */
  --cn-global--palette-dark-gray--100: rgba(47, 47, 47, 1); /* Dark gray / 100% */
  --cn-global--palette-dark-gray--60: rgba(47, 47, 47, .6); /* Dark gray / 60% */
  --cn-global--palette-dark-gray: var(--cn-global--palette-dark-gray--100);
  /** SPANISH GREY: #979797 */
  --cn-global--palette-spanish-grey--100: rgba(151, 151, 151, 1);
  --cn-global--palette-spanish-grey--30: rgba(151, 151, 151, .3);
  --cn-global--palette-spanish-grey: var(--cn-global--palette-spanish-grey--100);
  /** RED PIGMENT: #ed1d24 */
  --cn-global--palette-red-pigment--100: rgba(237, 29, 36, 1);
  --cn-global--palette-red-pigment: var(--cn-global--palette-red-pigment--100);
  /** White Smoke: #f5f5f5 */
  --cn-global--palette-white-smoke--100: rgba(245, 245, 245, 1);
  --cn-global--palette-white-smoke: var(--cn-global--palette-white-smoke--100);
  /** Unbleached: #fbf9f7 */
  --cn-global--palette-unbleached--100: rgba(251, 249, 247, 1);
  --cn-global--palette-unbleached: var(--cn-global--palette-unbleached--100);
  /** Borders */
  --cn-global--border--Color: var(--cn-global--palette-black--30);
  --cn-global--border--Color--DarkTheme: var(--cn-global--palette-white--30);
  --cn-global--border: 1px solid var(--cn-global--border--Color);
  --cn-global--border--DarkTheme: 1px solid var(--cn-global--border--Color--DarkTheme);
}

/** ***********************************************************************************
 * Conchiglia miscellaneous design tokens
 *********************************************************************************** */
:root {
  /**
   * Durations
   */
  --cn-global--Duration--tn: 100ms;
  --cn-global--Duration--xs: 150ms;
  --cn-global--Duration--sm: 300ms;
  --cn-global--Duration--md: 800ms;
  --cn-global--Duration--lg: 1400ms;
  --cn-global--Duration--xl: 1800ms;
  /**
   * Timing functions
   */
  --cn-global--AnimationTimingFunction--bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --cn-global--AnimationTimingFunction--easeoutcubic: cubic-bezier(0.33, 1, 0.68, 1);
  /**
   * Box shadow
   */
  --cn-global--BoxShadow--default: 0 2px 10px 0 rgba(0, 0, 0, .12);
  --cn-global--BoxShadow--CardButton: 0 0 10px rgba(0, 0, 0, .13);
}

/** ***************************************************************************
 * Conchiglia design tokens
 *************************************************************************** */
/** ***********************************************************************************
 * Typography E-commerce design tokens
 *********************************************************************************** */
:root {
  /**
    * @tokens Article font sizes
    * @presenter FontSize
    */
  --cn-global--FontSize-label--xxs: .625rem; /* Label / Extra Extra Small: 10px */
  --cn-global--FontSize-label--xs: .875rem; /* Label / Small: 14px */
  --cn-global--FontSize-label--sm: 1rem;
  --cn-global--FontSize-label--md: 1.125rem;
  --cn-global--FontSize-label--lg: 1.4375rem;
  --cn-global--FontSize-label--xl: 1.875rem;
  --cn-global--FontSize-paragraph--md: 1rem;
  --cn-global--FontSize-paragraph--lg: 1.125rem;
  --cn-global--FontSize-title--sm: 1.125rem;
  --cn-global--FontSize-title--md: 1.25rem;
  --cn-global--FontSize-title--lg: 1.625rem;
  --cn-global--FontSize-title--xl: 2.8125rem;
  --cn-global--FontSize-title--2xl: 3.125rem;
  /**
    * @tokens Text styles
    */
  --cn-global--Font-label--xxs-medium: var(--cn-global--FontWeight-medium) var(--cn-global--FontSize-label--xxs) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xs-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-label--xs) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xs-book: var(--cn-global--FontWeight-book-regular) var(--cn-global--FontSize-label--xs) var(--cn-global--FontFamily-book);
  --cn-global--Font-label--xs-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--xs) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--sm-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--sm-medium: var(--cn-global--FontWeight-medium) var(--cn-global--FontSize-label--sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-medium: var(--cn-global--FontWeight-medium) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--md-bold: var(--cn-global--FontWeight-bold) var(--cn-global--FontSize-label--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--lg-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-label--lg) var(--cn-global--FontFamily-default);
  --cn-global--Font-label--xl-bold: var(--cn-global--FontWeight-bold) var(--cn-global--FontSize-label--xl) var(--cn-global--FontFamily-default);
  --cn-global--Font-paragraph--md-medium: var(--cn-global--FontWeight-medium) var(--cn-global--FontSize-paragraph--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-paragraph--lg-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-paragraph--lg) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--sm-regular: var(--cn-global--FontWeight-regular) var(--cn-global--FontSize-title--sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--sm-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--sm) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--md-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--md) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--lg-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--lg) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--xl-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--xl) var(--cn-global--FontFamily-default);
  --cn-global--Font-title--2xl-semibold: var(--cn-global--FontWeight-semibold) var(--cn-global--FontSize-title--2xl) var(--cn-global--FontFamily-default);
  /**
  * @tokens Line heights
  * @presenter LineHeight
  */
  --cn-global--LineHeight-xs: 1.5rem;
  --cn-global--LineHeight-md: 1.875rem;
  --cn-global--LineHeight-lg: 3.125rem;
  --cn-global--LineHeight-xl: 3.375rem;
}

/** ***********************************************************************************
 * Layout design tokens
 *********************************************************************************** */
:root {
  /**
   * @tokens Breakpoints
   */
  --cn-global--breakpoints--sm: map.get($grid-breakpoints, sm);
  --cn-global--breakpoints--md: map.get($grid-breakpoints, md);
  --cn-global--breakpoints--lg: map.get($grid-breakpoints, lg);
  --cn-global--breakpoints--xl: map.get($grid-breakpoints, xl);
  --cn-global--breakpoints--xxl: map.get($grid-breakpoints, xxl);
  /**
   * Content grid
   */
  /** Column count */
  --cn-global--content-grid--sm--columncount: 2;
  --cn-global--content-grid--md--columncount: 12;
  --cn-global--content-grid--columncount: var(--cn-global--content-grid--sm--columncount);
  /** Column size */
  --cn-global--content-grid--xs--columnsize: 9.5vw; /* 152px */
  --cn-global--content-grid--sm--columnsize: 2.375rem; /* 38px */
  --cn-global--content-grid--md--columnsize: 3.188rem; /* 51px */
  --cn-global--content-grid--lg--columnsize: 4.5rem; /* 72px */
  /* --cn-global--content-grid--columnsize: var(--cn-global--content-grid--xs--columnsize); */
  /** Gutter size */
  --cn-global--content-grid--xs--guttersize: 1rem;
  --cn-global--content-grid--sm--guttersize: 1.5rem;
  --cn-global--content-grid--md--guttersize: 1.375rem;
  --cn-global--content-grid--lg--guttersize: 1.8125rem;
  --cn-global--content-grid--xl--guttersize: 2.25rem;
  --cn-global--content-grid--xxl--guttersize: 2.5rem;
  --cn-global--content-grid--guttersize: var(--cn-global--content-grid--xs--guttersize);
  /** Offset size */
  --cn-global--content-grid--xs--offsetsize: 1rem;
  --cn-global--content-grid--sm--offsetsize: 1.625rem;
  --cn-global--content-grid--md--offsetsize: 2.375rem;
  --cn-global--content-grid--lg--offsetsize: 3rem;
  --cn-global--content-grid--xl--offsetsize: 3.75rem;
  --cn-global--content-grid--xxl--offsetsize: 4.25rem;
  --cn-global--content-grid--offsetsize: var(--cn-global--content-grid--xs--offsetsize);
  --cn-global--content-grid--GridTemplateColumns: repeat(var(--cn-global--content-grid--columncount), 1fr);
}

/* sm: 600px */
@media all and (min-width: 37.5rem) {
  :root {
    --cn-global--content-grid--columncount: var(--cn-global--content-grid--sm--columncount);
    /* --cn-global--content-grid--columnsize: var(--cn-global--content-grid--sm--columnsize); */
    --cn-global--content-grid--guttersize: var(--cn-global--content-grid--sm--guttersize);
    --cn-global--content-grid--offsetsize: var(--cn-global--content-grid--sm--offsetsize);
  }
}
/* md: 768px */
@media all and (min-width: 48rem) {
  :root {
    --cn-global--content-grid--columncount: var(--cn-global--content-grid--md--columncount);
    /* --cn-global--content-grid--columnsize: var(--cn-global--content-grid--md--columnsize); */
    --cn-global--content-grid--guttersize: var(--cn-global--content-grid--md--guttersize);
    --cn-global--content-grid--offsetsize: var(--cn-global--content-grid--md--offsetsize);
  }
}
/* lg: 1024px */
@media all and (min-width: 64rem) {
  :root {
    /* --cn-global--content-grid--columnsize: var(--cn-global--content-grid--lg--columnsize); */
    --cn-global--content-grid--guttersize: var(--cn-global--content-grid--lg--guttersize);
    --cn-global--content-grid--offsetsize: var(--cn-global--content-grid--lg--offsetsize);
  }
}
/* xl: 1280px */
@media all and (min-width: 80rem) {
  :root {
    /* --cn-global--content-grid--columnsize: var(--cn-global--content-grid--xl--columnsize); */
    --cn-global--content-grid--guttersize: var(--cn-global--content-grid--xl--guttersize);
    --cn-global--content-grid--offsetsize: var(--cn-global--content-grid--xl--offsetsize);
  }
}
/* xxl: 1440px */
@media all and (min-width: 90rem) {
  :root {
    /* --cn-global--content-grid--columnsize: var(--cn-global--content-grid--xxl--columnsize); */
    --cn-global--content-grid--guttersize: var(--cn-global--content-grid--xxl--guttersize);
    --cn-global--content-grid--offsetsize: var(--cn-global--content-grid--xxl--offsetsize);
  }
}
/** ***********************************************************************************
 * Color design tokens
 *********************************************************************************** */
:root {
  /** GAINSBORO: #dcdcdc */
  --cn-global--palette-gainsboro--100: rgba(220, 220, 220, 1);
  --cn-global--palette-gainsboro: var(--cn-global--palette-gainsboro--100);
}

/** ***************************************************************************
 * Conchiglia utility classes
 *************************************************************************** */
/**
 * Hidden
 */
.cn-u-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute !important;
}

.cn-u-hidden_focusable {
  clip: rect(0 0 0 0);
  border: none;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.cn-u-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * Force visibility
 */
.make-visible {
  visibility: visible !important;
}
.make-visible > * {
  opacity: 1 !important;
}

/**
 * Layout
 */
.cn-u-center-absolute {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* apply to children of element with template columns */
.cn-u-subgrid_alternative {
  /* span the whole grid */
  grid-column: 1/-1;
  /* create another grid and inherit the values from the parent grid */
  display: inherit;
  grid-template-columns: inherit;
  grid-gap: inherit;
  /* overwrite the display for browsers that usnderstand display: contents */
  /* display: contents; */
}

input:focus-visible + label.cn-c-button {
  outline: -webkit-focus-ring-color auto 1px;
}

.cn-u-divider {
  width: 100%;
  height: 1px;
  background-color: var(--cn-global--border--Color--DarkTheme);
}
.cn-u-divider.dark-background {
  background-color: var(--cn-global--border--Color);
}

.cn-u-error_text {
  font: var(--cn-global--Font-label--sm-regular);
  margin-block: pxToRem(14px) 0;
  color: var(--cn-global--palette-red);
}
.cn-u-error_text.general {
  margin-block: pxToRem(20px);
}

/** ***********************************************************************************
 * Conchiglia common Shared template styles
 *********************************************************************************** */
body {
  --cn-c-template_shared--top_nav--OffsetHeight: 0px;
  --cn-c-template_shared--top_nav--Height: 3.625rem;
  --cn-c-template_shared--top_nav--PositionY: calc(var(--cn-c-template_shared--top_nav--OffsetHeight) + var(--cn-c-template_shared--top_nav--Height));
  --cn-c-template_shared--main_nav--Height: 6.0625rem;
  --cn-c-template_shared--main_nav--MinHeight: 4.5625rem;
  --cn-c-template_shared--content--MaxWidth: 120rem;
}

.cn-c-cursor {
  display: none;
}
@media all and not (pointer: coarse) {
  .cn-c-cursor:has(.cursor-shape.cursor--backdrop), .cn-c-cursor:has(.cursor-shape.cursor--index-backdrop) {
    display: block;
  }
}

.cn-c-header {
  transition: all var(--cn-global--Duration--md) cubic-bezier(0.165, 0.84, 0.44, 1);
}

.top_nav-container .cn-c-top_nav {
  padding-inline: var(--cn-global--content-grid--offsetsize);
  height: var(--cn-c-template_shared--top_nav--PositionY);
  max-width: var(--cn-c-template_shared--content--MaxWidth);
  margin-inline: auto;
  padding-block: 0.625rem;
}
.top_nav-container .cn-c-top_nav .cn-c-navigation {
  --cn-c-navigation--MarginBlock: var(--cn-c-template_shared--top_nav--PositionY);
}
@media all and (min-width: 80rem) {
  .E_COMMERCE .top_nav-container .cn-c-top_nav .nav-expand-content > div {
    max-width: var(--cn-c-template_shared--content--MaxWidth);
    margin-inline: auto;
  }
}
@media all and (min-width: 90rem) {
  .top_nav-container .cn-c-top_nav .nav-expand-content > div {
    max-width: var(--cn-c-template_shared--content--MaxWidth);
    margin-inline: auto;
  }
}

.cn-c-header > .main_nav-container {
  background-color: var(--cn-c-header--Color);
}
.cn-c-header > .main_nav-container .cn-c-main_nav {
  padding-inline: var(--cn-global--content-grid--offsetsize);
  height: var(--cn-c-template_shared--main_nav--Height);
  max-width: var(--cn-c-template_shared--content--MaxWidth);
  margin-inline: auto;
  padding-block-start: 0.9375rem;
}

.cn-c-header.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--cn-global--BoxShadow--default);
  z-index: 100;
  /* add space for fixed header when it's fixed to top */
}
.cn-c-header.fixed-top .cn-c-main_nav {
  height: var(--cn-c-template_shared--main_nav--MinHeight);
  padding-block-start: unset;
}
.cn-c-header.fixed-top.is-open {
  position: unset;
}
.cn-c-header.fixed-top ~ .margin-to-set {
  margin-block-start: var(--cn-c-template_shared--top_nav--PositionY);
}
@media all and (min-width: 80rem) {
  .E_COMMERCE .cn-c-header.fixed-top ~ .margin-to-set {
    margin-block-start: calc(var(--cn-c-template_shared--top_nav--PositionY) + var(--cn-c-template_shared--main_nav--Height));
  }
}
@media all and (min-width: 90rem) {
  .cn-c-header.fixed-top ~ .margin-to-set {
    margin-block-start: calc(var(--cn-c-template_shared--top_nav--PositionY) + var(--cn-c-template_shared--main_nav--Height));
  }
}

.cn-c-search_bar .container {
  max-width: var(--cn-c-template_shared--content--MaxWidth);
  margin-inline: auto;
  padding-inline: var(--cn-global--content-grid--offsetsize);
}

.cn-c-footer .footer-container {
  display: grid;
  grid-template-columns: var(--cn-c-page--Grid-Template);
  grid-gap: 0 var(--cn-c-page--Grid-Gap);
}

/** ***********************************************************************************
 * Conchiglia common E-commerce template styles
 *********************************************************************************** */
:root {
  --cn-c-page--Font: var(--cn-global--Font-paragraph--sm-regular);
  /**
   * Default color palette
   */
  --cn-c-page--AccentColor: var(--cn-global--palette-red);
  --cn-c-page--AccentColor--with-opacity: var(--cn-global--palette-red--65);
  --cn-c-page--BackgroundColor: var(--cn-global--palette-white);
  --cn-c-page--Color: var(--cn-global--palette-black);
}

/**
 * Page
 * 1: reset
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0; /* 1 */
  padding: 0; /* 1 */
}

body {
  --cn-c-page--Grid-Template: var(--cn-global--content-grid--GridTemplateColumns);
  --cn-c-page--Grid-Gap: var(--cn-global--content-grid--guttersize);
}

body {
  accent-color: var(--cn-c-page--AccentColor);
  background-color: var(--cn-c-page--BackgroundColor);
  color: var(--cn-c-page--Color);
  font: var(--cn-c-page--Font);
  height: 100%;
}

/**
 * Label
 */
label:has(input) {
  cursor: pointer;
}

label[for] {
  cursor: pointer;
}

.sticky-highlight {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  height: 5rem;
  /* left: 0; */
  max-width: 100% !important;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  touch-action: none;
  transform: translateY(-200%) !important;
  transition: all var(--cn-global--Duration--md) ease;
  visibility: hidden;
  z-index: 9;
}

.sticky-highlight.scroll-up {
  transform: translateY(0) !important;
  visibility: visible;
}

.cn-c-footer {
  --cn-c-footer--PaddingBlock: 1rem;
  --cn-c-footer--PaddingInline: var(--cn-global--content-grid--offsetsize);
  --cn-c-footer--MaxWidth: var(--cn-c-home--content--MaxWidth, var(--cn-c-template_shared--content--MaxWidth));
}

/*# sourceMappingURL=main.css.map*/