/* Begin custom additions */
  
@font-face {
  font-family: 'Arpel-Gotham';
  src: url('../css/Gotham-ExtraLight.woff2') format('woff2'),
       url('../css/Gotham-ExtraLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arpel-Gotham';
  src: url('../css/Gotham-Light.woff2') format('woff2'),
       url('../css/Gotham-Light.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arpel-Gotham';
  src: url('../css/Gotham-Book.woff2') format('woff2'),
       url('../css/Gotham-Book.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}



@font-face {
  font-family: 'Arpel-Gotham';
  src: url('../css/Gotham-Bold.woff2') format('woff2'),
       url('../css/Gotham-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body, h1, h2, h3, h4, h5, h6, p, a, li {
  font-family: 'Arpel-Gotham', sans-serif;
}




/* General coloring */
#wrapper {
  background-color: var(--color-bg-default);
}

#wrapper .breadcrumb li {
  font-size: small;
}

#wrapper .breadcrumb li::after {
    margin: 0.125rem;
}
/* Header Properties */
#header {
  box-shadow: none;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between; /* left / center / right */
  height: 70px;
  padding: 25px 0px 5px 0px; /* optional horizontal padding */
  margin: 0rem 2rem;
  position:  relative;
  /* box-shadow: 0px 1px 0px 0px rgba(0, 0, .9); */
  box-shadow: 0px 1px 0px 0px rgb(255, 255, 255);
}

.header-logo {

  flex: 0 0 auto;
  text-align: center;
  margin: 0 auto;
}

.header-logo .logo-wrapper {
  position: relative;
  display: inline-block; /* shrink to logo size */
}

.header-logo .logo-bg {
  position: absolute;
  bottom: 0;        /* aligns with bottom of logo */
  left: 20%;        /* horizontal start of rectangle */
  width: 60%;       /* width covering the text portion */
  height: 0.2em;    /* adjust height to cover intersecting area */
  background: white;
  z-index: 1;       /* behind logo popup-ga.popup-gallery-canvas */
  pointer-events: none; /* does not interfere with hover/click */
}

.header-logo img {
  height: 60px;
  width: auto;
  display: block;
  position: relative;
  color: var(--color-text-default);
  z-index: 2;       /* on top of rectangle */
}


.header-left {
  display: flex;
  flex-direction: row;
  padding-left: 0.5rem;
}
.header-right {
  white-space:nowrap;
  display: flex;
  flex-direction: row;
  justify-content: flex-end; 
  gap: 15px; 
  padding-right: 0.5rem;
}

.header-options {
  padding: 0 !important;
}

.search-toggle {
  padding: 0;

}

.language-selector {
  margin-left: 1rem;
  font-weight: 600;
}
.language-selector span.expand-more{
 vertical-align: middle;
}

.header-menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px; /* space between menu items */
}

#header .header-menu a {
  text-decoration: none;
  color: var(--color-text-default);
  font-weight: 600;
}

#header a:hover {
  color: var(--color-hover) !important;
}

.header-main a:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

.carousel .carousel-control .icon-next:hover i,.carousel .carousel-control .icon-prev:hover i,.dropdown:hover .expand-more,.page-my-account #content .links a:hover i,.search-widget form button[type=submit] .search:hover,.top-menu .sub-menu a:hover {
    color: var(--color-hover)
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

#header-search-panel {
  margin-top: 5px;
  position: relative;
  z-index: 90;
}

.header-options {
  display: flex;
  gap: 0.25rem;
}

@media (max-width: 1118px) {
  .header-pc-hide {
    display: none!important;

  }
}
@media (min-width: 1118px) {
  .header-mobile-hide {
    display: none!important;

  }
}

#mobile_top_menu_wrapper {
  width: 100%;
  background-color: var(--color-bg-default);
}

#mobile_top_menu_wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobile_top_menu_wrapper ul li a {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: var(--color-text-default);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
}

#mobile_top_menu_wrapper ul li:last-child a {
  border-bottom: none;
}


/* Footer Changes */

.block-social {
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
}
.block-social ul li {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.25rem;
  cursor: pointer;
  background-color: var(--color-bg-default);
}
.block-social ul li:hover {
  background-color: var(--color-bg-default) !important;
}
.block-social ul li a {
  display: block;
  height: 100%;
  overflow: hidden;
  text-indent: 100%;

  white-space: nowrap;
}

.instagram {
  background: url("../img/svg/Instagram-Logo-Black.svg") no-repeat center center;
  background-size: contain;
}

.facebook {
  background: url("../img/svg/Facebook-Logo-Black.svg") no-repeat center center;
  background-size: contain;
}

.twitter {
  background: url("../img/svg/X-Logo-Black.svg") no-repeat center center;
  background-size: contain;
}

.footer-container {
  padding-top:0.5rem;
}

/* Body Changes */
body#category .container,
body#product .container,
body#ets_blog_page .container, 
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%;
  }

body#category .breadcrumb,
body#product .breadcrumb,
body#ets_blog_page .breadcrumb,
.breadcrumb{
    padding-left: 0.5rem!important;
}
.row {
    margin-left: 0!important;
    margin-right: 0!important;
}
/* Catalogue Page */

.block-categories{
  padding: 0.5rem;
  padding-top: 15px;
} 
.card-block {
  padding: 0.5rem;
}
.block-categories,
#js-product-list-header {
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) {
  body#category .row {
    display: flex;
    align-items: stretch;
  }
}

@media (min-width: 768px) {
  #left-column .block-categories {
    position: sticky;
    top: 10px; /* adjust for header */
  }
}

/* Mobile reset */
@media (max-width: 767.98px) {
  #left-column .block-categories {
    position: static;
  }
}
/* Home Page */

.hero {
  position: relative;
  width: 100vw;       /* full viewport width */
  margin-left: calc(-50vw + 50%); /* escape container padding */
  height: 400px;      /* adjust height */
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body#index #wrapper{
  padding-top:  1rem;
}









  
/* Product Page */

.product-description, .card, .block-categories {
  background-color: var(--color-bg-default);
}

.thumbnail-container {
  border-radius: 0rem;
}

.product-images>li.thumb-container .thumb {
    margin-bottom: .625rem;
    border-radius: 0px;
    cursor: pointer
}

#product #content {
  position: relative;
  margin: 0;
  margin-left: 0.5rem;
}

.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
    border: var(--color-hover) 1px solid;

}

.product-cover {
  width:100%;
  max-width: 400px;
  height: 400px;
  max-height: 400px;
  margin: 0 auto;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  overflow: hidden;
}

.product-cover picture,
.product-cover img {
  max-width: 400px;
  max-height: 400px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain; /* ensures the entire popup-ga.popup-gallery-canvas fits without cropping */
}

.thumb-container {
  width: 80px;
  height: 80px;
  overflow: hidden;
  display: inline-block;
  margin-right: 5px;
}

.thumb-container img {
  max-width: 80px;
  max-height: 80px;
  min-width: 45px;
  min-height: 45px;
  object-fit: cover; /* crop to fit square */
}

.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border: var(--color-hover) 1px solid;
}
#product-modal .modal-content .modal-body .product-images img:hover {
  border: var(--color-hover) 3px solid;
}

/* Only inside the product modal */
#product-modal .modal-body > figure {
  background-color: var(--color-bg-default);   /* white background */
}
#product-modal .modal-body .popup-gallery-canvas {
  background-color: var(--color-bg-default);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0 auto;
}

/* Desktop: fixed 800x800 */
#product-modal .modal-body .popup-gallery-canvas {
  width: 800px;
  height: 800px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0 auto;
}

/* Large tablets / small desktops */
@media (max-width: 1200px) {
  #product-modal .modal-body .popup-gallery-canvas {
    width: 600px;
    height: 600px;
  }
}

/* Tablets / mobile landscape */
@media (max-width: 768px) {
  #product-modal .modal-body .popup-gallery-canvas {
    width: 90vw;      /* 90% of viewport width */
    height: 90vw;     /* maintain square canvas */
  }

  .thumbnail-gallery {
    margin: 0 auto !important;

  }


}

/* Small mobile */
@media (max-width: 480px) {
  #product-modal .modal-body .popup-gallery-canvas {
    width: 95vw;
    height: 95vw;
  }
}

.popup-gallery-canvas img.js-modal-product-cover {
  max-width: 100%;            /* scale down to fit canvas */
  max-height: 100%;
  width: auto;                /* preserve aspect ratio */
  height: auto;
  display: block;
}







.info-sheet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem 0.5rem; 
  justify-content: space-between;
}

.info-block {
  width: 30%;
  margin-top: 0.5rem;
  margin-left: 0 ;
  margin-right: 0 ;
}

@media (max-width: 768px) {
  .info-block {
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0 ;
    margin-right: 0 ;
  }
}

.info-block__title {
  text-align: center;
  margin-bottom: 0.5rem;
  border-bottom: var(--color-separator) 1px solid;
}

.feature-sheet .feature {
  padding-bottom: 0.25rem; 
}


.footer-container .container .row {
  text-align: center;
}











/* aaaaaa */
.header-search {
  display: flex;
  align-items: center;
}

.search-toggle {
  background: none;
  border: 0;
  cursor: pointer;
}

#search-panel {
  width: 100%;
  border-top: 1px solid var(--color-separator);
  padding: 1rem;
}

/* blog mobile */
@media (max-width: 768px) {
    .block.ets_block_latest.ets_blog_ltr_mode,
    .block.ets_block_categories.ets_blog_ltr_mode,
    .block.ets_block_archive.ets_blog_ltr_mode,
    .title_blog,
    .block.ets_block_latest.ets_blog_ltr_mode.page_blog.ets_block_slider,
    .block.ets_block_search.ets_blog_ltr_mode,
    .content_block {
    display: none !important;
    }
}

/* .ets-blog-gallery {
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    transform: none;
}

.ets-blog-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.ets-blog-gallery-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
 */


body#ets_blog_page #content-wrapper {
  padding: 0 !important;

}

.ets-blog-gallery {
  width: 100%;
}

.ets-blog-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ets-blog-gallery-item {
  height: 70vh;
  flex-grow: 1;
}

.ets-blog-gallery-item:last-child {
  flex-grow: 10;
}

.ets-blog-gallery-item img {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
  vertical-align: bottom;
  padding: 0.25rem;
}
.ets-blog-post-content img {
  display: block;
  margin: 0 auto;
}
@media (max-aspect-ratio: 1/1) {
  .ets-blog-gallery-item {
    height: 30vh;
  }
}

@media (max-height: 480px) {
  .ets-blog-gallery-item {
    height: 80vh;
  }
}

@media (max-aspect-ratio: 1/1) and (max-width: 768px) {
  .ets-blog-gallery-grid {
    flex-direction: row;
  }
  .ets-blog-gallery-item {
    height: auto;
    width: 100%;
  }
  .ets-blog-gallery-item img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
    
  }
}