/** Shopify CDN: Minification failed

Line 466:0 Expected "}" to go with "{"

**/
/*------------------------------------
 *   CSS FOR ESSENCIA THEME
 *------------------------------------*/
 
 .page-width:has(.image-with-text) {
    padding: 0 !important;
    max-width: unset !important;
}

 .sticky {
 position:sticky !important;
 top:0;
  
}


@media screen and (max-width:749px) {
.hide--mobile {
 display:none !important; 
}
  
}

@media screen and (min-width:750px) {
.hide--desktop {
 display:none !important; 
}
  
}


.desc-large .ss-text__content p {
font-family:var(--font-heading-family);
font-size:clamp(3rem,4vw,7rem);
line-height:1.3em;

}

@media screen and (min-width:750px) {
.vertical-rl > * {
writing-mode:vertical-rl;
justify-content:center;
}

}

@media screen and (min-width:1024px) {
.card-wrapper.product-card-wrapper .card__inner+.card__content .card__information {
    display: block !important;
}

}

/* Make sure collection grid shows one column on mobile */
@media screen and (max-width:749px) {
 .collection-list__item.grid__item {
      flex:none !important;
      }
}




/*------------------------------------
 *   CUSTOM FONTS
 *------------------------------------*/

@font-face {
  font-family: 'Alta';

  src: url('/cdn/shop/files/alta-regular.woff2?v=1749190685') format('woff2');

}

@font-face {
  font-family: 'Kollektif';

  src: url('/cdn/shop/files/Kollektif.woff2?v=1749190685') format('woff2');

}


:root {

  --font-heading-family: 'Alta';
  --font-body-family: 'Kollektif';

}




/*------------------------------------
 *   HORIZONTAL TABS FEATURE
 *------------------------------------*/

/** Core CSS **/
.horizontal .c-image-list {
  flex-direction: column;
}

.horizontal ul.c-image-list__nav {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}

/** Content Styles **/
.horizontal .c-image-list__media-item {
  border: 1px solid;
  padding: 3% !important;
}

.horizontal .c-image-list__nav {
  margin-top: 10px !important;
}

/** Content Widths **/

.horizontal .c-image-list__media {
  min-width:50% !important;
  flex-basis:50% !important;
}


/** Aspect Ration of Image **/
.horizontal .c-image-list__media {
  position: relative;
  height: 0 !important;
  padding-bottom: 50% !important; 
}

.horizontal .c-image-list__media img {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}

/** Padding of Nav Items **/
.horizontal .c-image-list__nav li a {
  padding: 0.5rem 2rem;
  box-sizing: border-box;
}

.horizontal .c-image-list__nav li {
  position: relative;
  z-index: 2;
}

/** Active Item Bottom Border **/
.horizontal .c-image-list__nav li a::before {
  content: "";
  position: absolute;
  width: auto;
  height: auto;
  inset: 0;
  background-color: transparent;
  
  bottom: -1px;
  z-index: -1;
  opacity: 0;
  border-left: 1px solid;
  border-right: 1px solid;
}

.horizontal .c-image-list__nav li a.is-active::before {
  opacity: 1;
}

/** Nav Item Borders and Hover Transition **/
.horizontal .c-image-list__nav li a:hover::after {
  top: -5px;
}
.horizontal .c-image-list__nav li a::after {
  content: "";
  position: absolute;
  width: auto;
  height: auto;
  inset: 0;
  background-color: transparent;
  bottom: -1px;
  z-index: -1;
  opacity: 1;
  border: 1px solid;
  border-bottom: 0px solid;
  transition: 0.2s;
}


/** Font Size **/
.horizontal .c-image-list__nav a span {
    font-size: 1.3rem !important;
}

/** Sandra custom CSS **/

@media screen and (min-width:750px) {
.horizontal .c-image-list {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

}

@media screen and (max-width:749px) {
.horizontal .c-image-list {
    padding-top: 78px !important;
    padding-bottom: 78px !important;

}

}


.horizontal .c-image-list__media-item {
  border: none;
}

@media screen and (max-width:749px) {
.horizontal .c-image-list__nav li {
    min-width: fit-content;
}

}




/*------------------------------------
 *   HEADER - TRANSPARENT
 *------------------------------------*/

.header-wrapper {
    position: absolute;
    width: 100%;
    background-color: transparent !important;
}



.scrolled .header-wrapper {
  background-color: #3E3125!important;
  opacity: 1 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

  


/*Reduce Height of Draw Navigation */

.menu-drawer {
  height: 50vh !important
}


.cart-count-bubble {
  color: #3E3125 !important;
}



/*------------------------------------
 *   ADD SECTION BORDERS - MARQUEE TEXT
 *------------------------------------*/

#shopify-section-template--24633160630584__marquee_slider_DmkKHg {
  border-top: 1px solid #3E3125;
  border-bottom: 1px solid #3E3125;
}


/*------------------------------------
 *   BUTTON STYLES
 *------------------------------------*/

a.button.button--primary {
    background: transparent !important;
    border: 1px solid !important;
}

.ss-text__content__button-container {
    padding-top: 30px !important;
}


.c-image-list a.button--secondary {
    all: unset;
    display: inline-block;
    text-decoration: underline;
    text-align: left;
    font-weight: normal;
    cursor: pointer;
    margin-top: 20px;
}

.button--secondary {
    background-color: transparent !important;
}

.c-slider__button-container {
    padding-top: 30px !important;
}


/*------------------------------------
 *   BACKGROUND TEXTURES
 *------------------------------------*/

@media screen and (max-width:749px) {
section.fullheight-bg .section-background {
 position:absolute !important;
}
}

section .texture {
    background-image: url('/cdn/shop/files/TEXTURED_BACKGROUND.png?v=1749193261') !important;
    background-size: cover; /* Or use 'contain' or a fixed size depending on your layout */
    background-repeat: no-repeat;
    background-position: center;
}






/*------------------------------------
 *   DOUBLE SECTION BORDER
 *------------------------------------*/

section.doubleborder::before {
    content: "";
    position: absolute;
    bottom: 15px; /* 18px above the bottom border */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #3E3125;
    z-index:9 !important;
}

section.doubleborder::after {
    content: "";
    position: absolute;
    top: 14px; /* 18px below the top border */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #3E3125;
    z-index: 9 !important;
}

section .border {
    border-bottom: 1px solid;
}

section.border {
    border-bottom: 1px solid;
}


section .border-top {
    border-top: 1px solid;
}

section.border-top {
    border-top: 1px solid;
}


section.doubleborder-top::after {
    content: "";
    position: absolute;
    top: 14px; /* 18px below the top border */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #3E3125;
    z-index: 9 !important;
}


section.no-bottom-border {
    border-bottom: none !important;
}


section.doubleborder.no-bottom-border::before {
    display: none !important;
}

section.no-bottom-border::before,
section.no-bottom-border::after {
    display: none !important;
    border: none !important;
}

section.doubleborder-bottom {
  position: relative;
  border-bottom: 1px solid #3E3125;
}

section.doubleborder-bottom::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #3E3125;
  bottom: 15px; /* adjust spacing above the main border */
  left: 0;
  z-index: 9;
}



/*------------------------------------
 *   CUSTOM SPACERS
 *------------------------------------*/

.ss-grid__item.half {
    height: 50px!important;
}



/*------------------------------------
 *   CAROUSEL CARDS
 *------------------------------------*/


@media screen and (max-width:749px) {
.card-carousel--section .swiper-arrow-container {
    top: 90% !important;
}

  .swiper-slide {
  background: none !important;
}





/*------------------------------------
 *   REVERSE COLUMNS
 *------------------------------------*/

.column-reverse .ss-col-12 {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
}