@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');


/* [INFO] Botstrap resets and other universal rules */
a.aphyo-text-link {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-style: inherit;
  text-transform: inherit;

  text-decoration: underline;
  /* [INFO] underline is default, cannot be removed from text editor */
}

a.aphyo-text-link:hover {
  filter: brightness(0.75);
}

a.btn {
  padding: 0;
}

a.btn span {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  line-height: 1 !important;
}


/* [INFO] social links */
a[data-social-network] {
  position: relative;
  flex: 1;
}
a[data-social-network] svg {
  /* [INFO] same as images, necessary for variable grid */
  position: absolute;
}
a[data-social-network] path {
  transition: fill 0.15s ease-in-out 0s;;
}
a[data-social-network]:hover {
  /* [TODO] implement */
  --current-icon-color: var(--current-icon-hover-color) !important;
}

.aphyo-form-input {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  background-color: #FAF8F3;
  background-clip: padding-box;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.aphyo-form-input:focus {
  outline: 0;
}

.aphyo-form-text-label {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 16px;
  color: var(--cgygtswwonk-darker);

  padding-bottom: 10px;
}
.aphyo-form-text-input {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 16px;
  color: var(--cgygtswwonk-darker);
}


.btn:focus {
  box-shadow: none;
}

header-navigation a.btn {
  padding-left: 15px;
  padding-right: 15px;
}

.container-nav-link {
  position: relative;
}

.container-nav-dropdown {
  position: absolute;
  z-index: 999999;
}

header-navigation .container-nav-dropdown a.btn {

  padding-top: 10px;
  padding-bottom: 10px;
}

.container-nav-link .container-nav-dropdown {
  display: none;
}

.container-nav-link:hover .container-nav-dropdown {
  display: block;
}

.hamburger-menu {
  display: none;
}

.menu-button-container {
  display: none;
}

#menu-toggle {
  display: none;
}

.container-nav {
  display: flex;
}

/* [INFO] from element's style */
.custom-font-size span {
  font-size: var(--font-size-desktop);
}

form-submit-button {
  display: block;
  position: relative;
}

[data-type="text"] *:last-child {

  margin-bottom: 0 !important;
}

@media (max-width: 768px) {

  header-navigation {
    position: relative;
  }

  .hamburger-menu {
    display: flex;
  }

  /* HAMBURGER START */

  .menu-button-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center; 
    justify-content: center;
  }

  #menu-toggle {
    display: none;
  }

  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: var(--hamburger-color, #35343b);
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }

  .menu-button::before {
    content: '';
    margin-top: -10px;
    width: 100%;
  }

  .menu-button::after {
    content: '';
    margin-top: 10px;
    width: 100%;
  }

  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }

  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }

  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }

  /* HAMBURGER END */

  .container-nav-link {
    width: 100%;
  }

  .container-nav {
    /* [INFO] from element's style */
    display: var(--mobile-nav-display);
    height: var(--mobile-nav-height);
    position: absolute;
    top: var(--mobile-nav-top);
    left: var(--mobile-nav-left);

    width: 100vw;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    overflow-y: auto;

    z-index: 9;

    padding-top: 20px;
  }

  .container-nav-dropdown {
    position: static;
    width: 100%;
    padding-left: 20px;
  }

  .container-nav navigation-button {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .custom-font-size span {
    font-size: var(--font-size-mobile);
  }
}

/* start auth */

.auth-icon-container {
  position: relative;
}


.auth-icon-dropdown {
  display: none;
  position: absolute;
  
  flex-direction: column;

  min-width: var(--min-w, 200px);
  max-width: var(--max-w, 400px);
  min-height: var(--min-h, 80px);
  z-index: 9999;
  
  box-shadow: 0px 3px 10px #0000001A;

  background-color: white;
}

.auth-icon-container:hover .auth-icon-dropdown  {
  display: flex;
}

.auth-link {

  max-width: calc(var(--max-w, 400px) - 40px);
  padding: 15px;
}

.link-reset {
  all: unset;
  cursor: pointer;
}

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


.auth-icon-container:hover .auth-icon-dropdown  {
  display: flex;
}

.always-visible-flex {
  display: flex !important;
}

/* end auth */


/* Ecommerce start */


.container-product-catalog {
  display: grid;
  grid-template-columns: repeat(42, 25px);
  grid-template-rows: repeat(50, minmax(25px, auto));
  gap: 5px;
  position: relative;
  box-sizing: border-box;
}
.container-product-page {
  display: grid;
  grid-template-columns: repeat(42, 25px);
  grid-template-rows: repeat(32, minmax(25px, auto));
  gap: 5px;
  position: relative;
  box-sizing: border-box;
}
.container-shopping-cart {
  display: grid;
  grid-template-columns: repeat(42, 25px);
  grid-template-rows: repeat(32, minmax(25px, auto));
  gap: 5px;
  position: relative;
  box-sizing: border-box;
}

product-catalog-section .container-product-listing {
  display: grid;
  grid-template-columns: repeat(var(--product-listing-columns-number, 3), 1fr);
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 30px;
  position: relative;
  box-sizing: border-box;
}
product-catalog-section .container-product-card {
  background-color: #F7F5F3;
  text-align: var(--product-card-text-align, 'start');
}
product-catalog-section .container-product-image {
  height: 340px;
}
product-catalog-section .img-product-card {
  object-fit: contain;
}
product-catalog-section .container-product-details {
  padding: 0 10px;
}
product-catalog-section .text-sale-price, 
product-page-details .text-sale-price,
shopping-cart-listing .text-sale-price {
  /* [TODO] what color?? */
  color: red; 
  margin-right: 6px;
}
product-catalog-section .text-strikethrough-price, 
product-page-details .text-strikethrough-price,
shopping-cart-listing .text-strikethrough-price {
  /* [TODO] what color?? */
  color: grey; 
  text-decoration: line-through;
}


product-catalog-section .container-filter {
  padding: 20px;
  margin-bottom: 30px;
}
product-catalog-section .container-filter-label {
  padding-bottom: 20px;
}
product-catalog-section .text-default-filter-options:hover {
  cursor: pointer;
  opacity: .7;
}

product-catalog-section .input-default {
  padding: 5px 10px 5px 10px;
  font-size: 14px;
  background-color: transparent;
  border-radius: 0px;
  width: inherit;
  border: 1px solid transparent;
}
product-catalog-section .input-box-default {
  border: 1px solid black;
}
/* Chrome, Safari, Edge, Opera */
product-catalog-section input::-webkit-outer-spin-button,
product-catalog-section input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
product-catalog-section input[type=number] {
  -moz-appearance: textfield;
}

product-catalog-section .default-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


product-page-details .container-main-image {
  height: 550px;
  width: 100%;
}
product-page-details .row-product-details {
  padding-bottom: 10px;
}


shopping-cart-summary .container-order-summary {
  /* [TODO] position sticky doesn't work */
  position: sticky;
  top: 50px;
  height: 100%;
}
shopping-cart-summary .inner-container-order-summary {
  position: relative;
  padding: 35px 30px;
}

/* ecommerce end  */


/* [INFO] actual default theme */
/* [INFO][TODO] add "#increase-specificity" manually to every selector containing "is:" when copy paste*/


/* [TODO] extract font-family from rootVariables into another variable */

:root {
  --cgygtswwonk-lighter-h: 42;
  --cgygtswwonk-lighter-s: 21%;
  --cgygtswwonk-lighter-l: 95%;
  --cgygtswwonk-light-h: 42;
  --cgygtswwonk-light-l: 90%;
  --cgygtswwonk-light-s: 14%;
  --cgygtswwonk-normal-h: 42;
  --cgygtswwonk-normal-l: 79%;
  --cgygtswwonk-normal-s: 6%;
  --cgygtswwonk-dark-h: 42;
  --cgygtswwonk-dark-l: 45%;
  --cgygtswwonk-dark-s: 0%;
  --cgygtswwonk-darker-h: 42;
  --cgygtswwonk-darker-l: 22%;
  --cgygtswwonk-darker-s: 6%;
  --cgygtswwonk-lighter: hsl(var(--cgygtswwonk-lighter-h), var(--cgygtswwonk-lighter-s), var(--cgygtswwonk-lighter-l));
  --cgygtswwonk-light: hsl(var(--cgygtswwonk-light-h), var(--cgygtswwonk-light-s), var(--cgygtswwonk-light-l));
  --cgygtswwonk-normal: hsl(var(--cgygtswwonk-normal-h), var(--cgygtswwonk-normal-s), var(--cgygtswwonk-normal-l));
  --cgygtswwonk-dark: hsl(var(--cgygtswwonk-dark-h), var(--cgygtswwonk-dark-s), var(--cgygtswwonk-dark-l));
  --cgygtswwonk-darker: hsl(var(--cgygtswwonk-darker-h), var(--cgygtswwonk-darker-s), var(--cgygtswwonk-darker-l));
  --ehkatohurdr-lighter-h: 42;
  --ehkatohurdr-lighter-l: 94%;
  --ehkatohurdr-lighter-s: 21%;
  --ehkatohurdr-light-h: 42;
  --ehkatohurdr-light-l: 87%;
  --ehkatohurdr-light-s: 9%;
  --ehkatohurdr-normal-h: 42;
  --ehkatohurdr-normal-l: 58%;
  --ehkatohurdr-normal-s: 0%;
  --ehkatohurdr-dark-h: 42;
  --ehkatohurdr-dark-l: 36%;
  --ehkatohurdr-dark-s: 2%;
  --ehkatohurdr-darker-h: 42;
  --ehkatohurdr-darker-l: 22%;
  --ehkatohurdr-darker-s: 6%;
  --ehkatohurdr-lighter: hsl(var(--ehkatohurdr-lighter-h), var(--ehkatohurdr-lighter-s), var(--ehkatohurdr-lighter-l));
  --ehkatohurdr-light: hsl(var(--ehkatohurdr-light-h), var(--ehkatohurdr-light-s), var(--ehkatohurdr-light-l));
  --ehkatohurdr-normal: hsl(var(--ehkatohurdr-normal-h), var(--ehkatohurdr-normal-s), var(--ehkatohurdr-normal-l));
  --ehkatohurdr-dark: hsl(var(--ehkatohurdr-dark-h), var(--ehkatohurdr-dark-s), var(--ehkatohurdr-dark-l));
  --ehkatohurdr-darker: hsl(var(--ehkatohurdr-darker-h), var(--ehkatohurdr-darker-s), var(--ehkatohurdr-darker-l));

  --font-family-xaoojmkfjdq: 'Montserrat', sans-serif;
  --font-family-zavvpfemnbk: Roboto, sans-serif;

}

.aphyo-box-rgjooqlajyr {}

.aphyo-box-pitmusxtfxl {
  background-color: var(--ehkatohurdr-darker);
  --border-top-left-radius: 10px;
  --border-top-right-radius: 10px;
  --border-bottom-left-radius: 10px;
  --border-bottom-right-radius: 10px;
  border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
}

.aphyo-box-lmDRJsfenVS {
  background-color: hsl(42, 100%, 100%);
  --border-top-left-radius: 0px;
  --border-top-right-radius: 0px;
  --border-bottom-left-radius: 0px;
  --border-bottom-right-radius: 0px;
  border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
}


.aphyo-text-eojainvkdth,
li:has(.aphyo-text-eojainvkdth)::marker {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 64px;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--cgygtswwonk-darker);
  text-transform: none;
}

.aphyo-text-zafyujywmdk,
li:has(.aphyo-text-zafyujywmdk)::marker {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 48px;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--cgygtswwonk-darker);
  text-transform: none;
}

.aphyo-text-dvgsochyjah,
li:has(.aphyo-text-dvgsochyjah)::marker {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 36px;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--cgygtswwonk-darker);
  text-transform: none;
}

.aphyo-text-ngphwyzveip,
li:has(.aphyo-text-ngphwyzveip)::marker {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--cgygtswwonk-darker);
  text-transform: none;
}

.aphyo-text-lzlhswfhuuy,
li:has(.aphyo-text-lzlhswfhuuy)::marker {
  font-family: var(--font-family-zavvpfemnbk);
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--cgygtswwonk-darker);
  text-transform: none;
}

.aphyo-button-text-fssoivqlzfe {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--ehkatohurdr-darker);
  text-transform: none;
  text-decoration: none;
}

.aphyo-button-text-fssoivqlzfe:hover {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--ehkatohurdr-darker);
  text-transform: none;
  text-decoration: none;
}

.aphyo-button-text-meusxsnlvos {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--ehkatohurdr-lighter);
  text-transform: none;
  text-decoration: none;
}

.aphyo-button-text-meusxsnlvos:hover {
  font-family: var(--font-family-xaoojmkfjdq);
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--ehkatohurdr-lighter);
  text-transform: none;
  text-decoration: none;
}




@media (max-width: 768px) {

  .aphyo-text-eojainvkdth,
  li:has(.aphyo-text-eojainvkdth)::marker {
    font-size: 48px;
  }

  .aphyo-text-zafyujywmdk,
  li:has(.aphyo-text-zafyujywmdk)::marker {
    font-size: 40px;
  }

  .aphyo-text-dvgsochyjah,
  li:has(.aphyo-text-dvgsochyjah)::marker {
    font-size: 32px;
  }

  .aphyo-text-ngphwyzveip,
  li:has(.aphyo-text-ngphwyzveip)::marker {
    font-size: 18px;
  }

  .aphyo-text-lzlhswfhuuy,
  li:has(.aphyo-text-lzlhswfhuuy)::marker {
    font-size: 16px;
  }

  .aphyo-button-text-fssoivqlzfe {
    font-size: 16px;
  }

  .aphyo-button-text-fssoivqlzfe:hover {
    font-size: 16px;
  }

  .aphyo-button-text-meusxsnlvos {
    font-size: 16px;
  }

  .aphyo-button-text-meusxsnlvos:hover {
    font-size: 16px;
  }
}


@media(hover: hover) {

  .aphyo-box-pitmusxtfxl:not(.mobile-view .aphyo-box-pitmusxtfxl):hover {
    background-color: var(--ehkatohurdr-dark);
    --border-top-left-radius: 10px;
    --border-top-right-radius: 10px;
    --border-bottom-left-radius: 10px;
    --border-bottom-right-radius: 10px;
    border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
  }


  .btn-kyhzafvgabx-hover:not(.mobile-view .btn-kyhzafvgabx-hover):hover {
    font-weight: 500;
    font-style: normal;
    color: var(--ehkatohurdr-darker);
    text-transform: none;
    text-decoration: underline;
  }

}



.mobile-view :is(.aphyo-text-eojainvkdth, #increase-specificity, li:has(.aphyo-text-eojainvkdth)::marker) {
  font-size: 48px;
}

.mobile-view :is(.aphyo-text-zafyujywmdk, #increase-specificity, li:has(.aphyo-text-zafyujywmdk)::marker) {
  font-size: 40px;
}

.mobile-view :is(.aphyo-text-dvgsochyjah, #increase-specificity, li:has(.aphyo-text-dvgsochyjah)::marker) {
  font-size: 32px;
}

.mobile-view :is(.aphyo-text-ngphwyzveip, #increase-specificity, li:has(.aphyo-text-ngphwyzveip)::marker) {
  font-size: 18px;
}

.mobile-view :is(.aphyo-text-lzlhswfhuuy, #increase-specificity, li:has(.aphyo-text-lzlhswfhuuy)::marker) {
  font-size: 16px;
}

.mobile-view :is(.aphyo-button-text-fssoivqlzfe, #increase-specificity) {
  font-size: 16px;
}

.mobile-view :is(.aphyo-button-text-fssoivqlzfe:hover, #increase-specificity) {
  font-size: 16px;
}

.mobile-view :is(.aphyo-button-text-meusxsnlvos, #increase-specificity) {
  font-size: 16px;
}

.mobile-view :is(.aphyo-button-text-meusxsnlvos:hover, #increase-specificity) {
  font-size: 16px;
}