*:not(:defined) { opacity: 0; } /* Prevent FOUC on loading */ 
body { padding: 0; margin : 0;}

/* --------------- TOKENS ------------------- */
  :root{
    
    /* bases */
    --nowe-color-primary : #C21A17;
    --nowe-color-light : white;
    --nowe-color-dark : black;

    /* neutrals */
    --nowe-color-neutral-50 : #F7F7F7;
    --nowe-color-neutral-100 : #dcdcdc;
    --nowe-color-neutral-300 : #B4B4B4;
    --nowe-color-neutral-400 : #929292;
    --nowe-color-neutral-700 : #545454;
    --nowe-color-neutral-900: #333333;
    --nowe-color-interaction : rgba(0, 0, 0, 0.05);
    
    /* sizes */
    --nowe-margin-lateral : 24px;
    --nowe-margin-lateral-image : 16px;
    --nowe-content-width : 1360px;

    /* fonts */
    --el-font-family : "Inter";
    --el-font-color : var(--nowe-color-neutral-700, black);
    --el-font-weight : 300;
    --el-font-placeholder-fontcolor : var(--nowe-text-fontcolor, black);
    --el-font-placeholder-opacity : .5;

    /* icons */
    --el-icon-color : var(--el-font-color, black);
    
    /* animations */
    --enter-speed : .8s;
  }
  svg{ fill:currentColor; }


  /* --------------- FONTS ------------------- */
    /*@font-face {
      font-family: 'CrimsonPro';
      src: url('fonts/CrimsonPro-VariableFont_wght.woff2') format('woff2-variations');
      font-weight: 200; 
      font-style: normal;
      font-display: swap;
    }*/
    

    @font-face {
      font-family: 'Inter';
      src: url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2-variations');
      font-weight: 300 700; 
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'CrimsonPro';
      src: url('fonts/CrimsonPro-ExtraLight.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'CrimsonPro';
      src: url('fonts/CrimsonPro-ExtraLightItalic.ttf') format('truetype');
      font-weight: 200;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'Cormorant';
      src: url('fonts/Cormorant-Regular.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Cormorant';
      src: url('fonts/Cormorant-Italic.ttf') format('truetype');
      font-weight: 200;
      font-style: italic;
      font-display: swap;
    }

    

   
    /*  HEADING ------------------- */
    .heading { 
      font-family : "Cormorant"; 
      font-weight: 200;
      line-height: 130%;
      font-size: clamp(40px, 3.5vw, 56px);
      color : var(--nowe-color-dark, black);
    }
    button.heading{
      background: transparent;
      border: none;
      transition: all .3s ;
      cursor: pointer;
    }
    button.heading:hover{
      color : var(--nowe-color-primary);
      transform: translateY(-1%);
    }

    .heading.xxl { font-size: 160px;}
    .heading.xl { font-size: 120px;}
    .heading.l { font-size: clamp(56px, 5vw, 80px);}
    .heading.m { font-size: clamp(40px, 3.5vw, 56px); }
    .heading.s { font-size: clamp(32px, 2.5vw, 40px); }
    .heading.xs { font-size: clamp(24px, 2.1vw, 32px); }
    .heading.xxs { font-size: clamp(20px, 1vw, 24px); }


    /* TEXT ------------------- */
    p,.text {   
      font-size: 18px;
      line-height: 160%;
      font-weight: var(--el-font-weight, normal);
      color : var(--el-font-color, gray);
      font-family: var(--el-font-family, sans-serif);
      
    }
    p.bold,.text.bold{font-weight: bold;}
    p.xxl, .text.xxl{ font-size: 48px;}
    p.xl, .text.xl { font-size: 32px;}
    p.l, .text.l { font-size: 24px;}
    p.m, .text.m { font-size: 16px;}
    p.s, .text.s { font-size: 14px;}
    p.xs, .text.xs { font-size: 12px;}

    .italic { font-style: italic;}

    .overtitle {
      text-transform: uppercase;
      letter-spacing: .3em;
      color : var(--nowe-color-primary, black);
      font-weight: bold;
    }

    .highlight-text{
      color : var(--nowe-color-primary);
    }

    el-text[state="selected"] *{
      color : var(--nowe-color-primary);
    }

    el-text a{
      color: currentColor;
      text-decoration: none;
      transition: all .2s;
      display: inline-block;
      padding: 0;
    }

    el-text a:hover {
      transform: translateY(-3%);
      color: var(--nowe-color-neutral-700);
    }
    
    

  /* --------------- BUTTON ------------------- */
    el-button::part(element) {
      font-family: "Inter";
      font-size : 11px;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: normal;
      background-color: black;
      color: white;
      padding: 0 16px;
      height: 48px;
      border-radius: 0;
      transition: all .2s;
    }

    

  /* ----- Icon ------ */
    el-button.icon-button::part(element){
      font-size : 24px;
      padding: 0;
      width: 48px;
      height: 48px;
    }

    el-button.icon-button svg{
      width: 24px;
      height: 24px;
    }

    el-button.icon-button.small::part(element){
      width: 24px;
      height: 24px;
    }

    el-button.icon-button.small svg{
      width: 16px;
      height: 16px;
    }
  
  
  /* ----- primary ------ */
    el-button::part(element){
      background-color: var(--nowe-color-dark);
      color : var(--nowe-color-light);
    }

    el-button:hover::part(element){
      transform: translateY(-3%);
      background-color: var(--nowe-color-neutral-900);
    } 

    

  /* ----- secondary ------  */
    el-button.secondary::part(element),
    el-button.chips::part(element),
    .button-style.secondary {
      cursor: pointer;
      border: 1px solid var(--nowe-color-neutral-100);
      background-color: transparent;
      color : var(--nowe-color-dark);
      transition: all .2s;
    }

    el-button.secondary:hover::part(element),
    el-button.chips:hover::part(element),
    .button-style.secondary:hover {
      border: 1px solid transparent;
      transform: translateY(-3%);
      background-color: var(--nowe-color-interaction);
      
    }

    el-button.secondary.selected::part(element),
    el-button.chips.selected::part(element),
    .button-style.secondary.selected {
      border: 1px solid var(--nowe-color-dark);
    }

  
  /* ----- tertiary ------  */
    /*el-button.tertiary::part(element) {
      background-color: transparent;
      color : black;
    }

    .dark el-button.tertiary::part(element) {
      background-color: transparent;
      color : white;
    }

    el-button.tertiary:hover::part(element){
      cursor: pointer;
      color : var(--nowe-color-neutral-700);
      background-color: var(--nowe-color-interaction);
    } 

    el-button.tertiary[state="selected"]::part(element){
      color : var(--nowe-color-primary);
      
    } 

    el-button [slot="badge"]{
      transform: translate(0,0);
    }*/

    el-button.tertiary::part(element) {
      background-color: transparent;
      color : var(--nowe-color-dark);
      padding: 0;
    }

    .dark el-button.tertiary::part(element) {
      background-color: transparent;
      color : white;
    }

    el-button.tertiary:hover::part(element){
      cursor: pointer;
      color : var(--nowe-color-primary);
    } 

    el-button.tertiary[state="selected"]::part(element){
      color : var(--nowe-color-primary);
      
    } 

    el-button [slot="badge"]{
      transform: translate(0,0);
    }

  
  
  /* ----- Chips ------  */
  
    el-button.chips::part(element){
      height : 32px;
      padding: 0 8px;
    }

    el-button.chips svg{
      width: 16px;
    }


  /* ----- TAB ------  */

  el-button.tab::part(element) {
    background-color: transparent;
    color : var(--nowe-color-neutral-dark);
    padding: 0 1px;
    cursor: pointer;
    height: 32px;
  }

  el-button.tab:hover::part(element){
    color : var(--nowe-color-neutral-700);
  } 
  
  el-button.tab[state="selected"]::part(element),
  el-button[selected]::part(element){
    color : var(--nowe-color-dark);
    box-shadow: inset 0px  -2px 0px var(--nowe-color-primary);
  }

  /* ----- Avatar  ------  */
  .button-avatar{
    background-color: transparent;
    padding: 0;
    border : none;
    cursor: pointer;

  }

  /* ----- Accordion trigger ------  */

    el-button.accordion-trigger::part(element){
      justify-content: space-between;
      padding : 0px 8px 0px 0px;
      color: var(--nowe-color-neutral-400);

    }
  
  


  /* --------------- BADGE ------------------- */
  
  
  
  el-badge.overtitle::part(element){
    font-family: "Inter";
    font-size: clamp(10px, 1vw, 12px);
    text-transform: uppercase;
    letter-spacing: .3em;
    color : var(--nowe-color-primary, black);
    font-weight: bold;
    background-color: transparent;
    padding: 0 0px 8px;
  }

  el-badge.overtitle.big::part(element){
    font-size: clamp(16px, 1vw, 18px); ;
  }
  
  el-badge.overtitle.neutral::part(element){
    color : black;
  }

  el-badge.notification::part(element){
    height: 16px;
    min-width: 16px;
    background-color: var(--nowe-color-dark);
    color: var(--nowe-color-light);
    border-radius: 300px;
    font-size: 10px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    font-weight: normal;
  }

  el-badge.tertiary::part(element){
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0;
    color : var(--nowe-color-neutral-700);
    font-weight: 300;
    background-color: transparent;
    padding : 0;
  }

  el-badge.tertiary::part(icon-before){
    width: 18px;
  }


  

  /* --------------- IMAGE ------------------- */
  el-image { background-color: var(--nowe-color-interaction);  }
  el-image.transparent::part(element){ background-color: transparent;}

  

  /* --------------- INPUTS ------------------- */
  
  
  el-input-text::part(input), el-input-password::part(input){
    border: none;
    outline: 1px solid var(--nowe-color-neutral-100) ;
    background-color: transparent;
  }
  el-input-text, el-input-password.focused::part(label){
    color: var(--nowe-color-dark) ;
  }
  el-input-text, el-input-password.focused::part(input){
    outline: 1px solid var(--nowe-color-dark) ;
  }

  el-input-counter::part(input-element){
    font-size: 12px;
    padding: 0;
  }

  /*el-input-text, el-input-password[type="counter"]{
    height: 24px;
    border: 1px solid var(--nowe-color-neutral-100);
  }

  el-input-text, el-input-password[type="counter"]::part(input){
    background-color: transparent;
    border: none;
    outline: none;
  }

  el-input-text, el-input-password[type="counter"] el-button::part(element){
    height: 24px;
    width : 24px;
  }*/

  /* --------------- SEPARATORS ------------------- */
  el-separator::part(element){
    background-color: var(--nowe-color-neutral-100);
  }
  

  /* --------------- VARIANTS ------------------- */
  .variant-1 {
    background-color: var(--nowe-color-neutral-50);
  }
  
  .variant-2{
    background-color: black;
    --nowe-color-dark : white;
    --nowe-color-light : black;
    --nowe-color-neutral-400 : white;
    --nowe-color-interaction : rgba(255, 255, 255, 0.1);
    
  }

  .card-product .card-product-frame { transition : all .3s;}
  .card-product:hover .card-product-frame { transform: scale(.97); }

  .card-product .card-product-text { transition : all .3s; }
  .card-product:hover .card-product-text { opacity: .6; }
  
  .car-cart  { transition : all .3s; }
  .car-cart:hover{
    transform: translateY(-3%);
    cursor: pointer;
    color : var(--nowe-color-neutral-700);
    /*background-color: var(--nowe-color-interaction);*/
  } 


  /* --------------- EFFECTS & ANIMATIONS ------------------- */
  
  .effect-shadow {
    box-shadow: -15px 15px 30px rgba(0, 0, 0, 0.250);
  }


  .fade-in { animation: fadeIn var(--enter-speed, 0.8s)  ease forwards; animation-delay: var(--enter-delay, 0ms); }
  .fade-out { animation: fadeOut 0.5s ease forwards; animation-delay: var(--enter-delay, 0ms);}
  .slide-up { animation: slideUpMobile var(--enter-speed, .4s) ease forwards; animation-delay: var(--enter-delay, 0s); }
  
  .drawer-top { animation: drawerTop var(--enter-speed, .3s) ease forwards; animation-delay: var(--enter-delay, 0s); }
  .drawer-top-reverse { animation: drawerTopReverse var(--enter-speed, .3s) ease forwards; animation-delay: var(--enter-delay, 0s); }
  .drawer-right { animation: drawerRight var(--enter-speed, 1.2s) ease forwards; animation-delay: var(--enter-delay, 0s); }
  .drawer-left { animation: drawerLeft var(--enter-speed, 1.2s) ease forwards; animation-delay: var(--enter-delay, 0s); }
  .drawer-bottom { animation: drawerBottom var(--enter-speed, 1.2s) ease forwards; animation-delay: var(--enter-delay, 0s); }

  @media screen and (min-width: 1024px ) {
    .slide-up { animation: slideUp var(--enter-speed, .5s) ease forwards; animation-delay: var(--enter-delay, 0s); }

  }

  /* Drawers */
    @keyframes drawerLeft {
      from { transform: translateX(-100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @keyframes drawerRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @keyframes drawerTop {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes drawerBottom {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes drawerTopReverse {
      from { transform: translateY(0); opacity: 1;  }
      to { transform: translateY(-100%); opacity: 0; }
    }


  /* Slides */
    @keyframes slideUp {
      from { transform: translateY(1vw); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes slideUpMobile {
      from { transform: translateY(10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }


  /* Fades */
    @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
    }

    @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
    }

  

  .noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.noise::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 99;
  background-image: url(images/noise.png);
  background-position: 50%;
  /* background-repeat: repeat; ← implicite */

  animation: noise 4s steps(2) infinite;
  will-change: transform;
}
  
@keyframes noise {
  0%   { transform: translate3d( 0,   9rem, 0); }
  10%  { transform: translate3d(-1rem,-4rem, 0); }
  20%  { transform: translate3d(-8rem, 2rem, 0); }
  30%  { transform: translate3d( 9rem,-9rem, 0); }
  40%  { transform: translate3d(-2rem, 7rem, 0); }
  50%  { transform: translate3d(-9rem,-4rem, 0); }
  60%  { transform: translate3d( 2rem, 6rem, 0); }
  70%  { transform: translate3d( 7rem,-8rem, 0); }
  80%  { transform: translate3d(-9rem, 1rem, 0); }
  90%  { transform: translate3d( 6rem,-5rem, 0); }
  100% { transform: translate3d(-7rem, 0,    0); }
}