:root {
  /* components */

  /* icons */
  --icon-xs: 0.75em;
  --icon-sm: 0.875em;
  --icon-md: 1em;
  --icon-lg: 1.25em;
  --icon-xl: 1.5em;
  --icon-xxl: 2em;

  --icon-width: var(--icon-xl);
  --icon-height: var(--icon-xl);
  --icon-stroke-width: 1.5;
  --icon-stroke-color: currentColor;
  --icon-fill-color: none;

  --icon-nav-width: var(--icon-lg);
  --icon-nav-stroke-width: 2.5;
  --icon-nav-stroke-color: var(--color-white);

  --icon-toggle-width: var(--icon-xxl);
  --icon-toggle-stroke-width: 1.5;
  --icon-toggle-stroke-color: currentColor;

/* button normal */
  --button-display: inline-block;
  --button-margin: 0;
  --button-padding: 0.75rem 1rem;
  --button-surface-color: var(--surface-color-brand-light);
  --button-border: 1px solid var(--stroke-color-brand-dark);
  --button-border-radius: 0;
  --button-text-size: var(--font-size-16);
  --button-text-weight: var(--font-weight-regular);
  --button-text-color: var(--text-color-brand-dark);
  --button-box-shadow: var(--box-shadow-medium);
  --button-transition: border-color var(--transition), background-color var(--transition), color var(--transition); 

/* button hover */
  --button-hover-surface-color: var(--surface-color-neutral-light);
  --button-hover-border: 1px solid var(--stroke-color-neutral-dark);
  --button-hover-border-color: var(--stroke-color-neutral-dark);
  --button-hover-text-color: var(--text-color-neutral-dark);
}

/* Icons */

.secondary-navigation .nav-icon {
  width: var(--icon-nav-width);
  height: var(--icon-nav-width);
  stroke: var(--icon-nav-stroke-color);
  stroke-width: var(--icon-nav-stroke-width);
  flex-shrink: 0;
}

.secondary-navigation .current-menu-item .nav-icon {
  stroke: var(--icon-stroke-color);
  stroke-width: var(--icon-nav-stroke-width);
  flex-shrink: 0;
}

.open-menu-icon,
.close-menu-icon {
    height: var(--icon-toggle-stroke-width);
    width: var(--icon-toggle-stroke-width);
    stroke: var(--icon-toggle-stroke-color);
    stroke-width: var(--icon-toggle-width);
}

.open-menu-icon,
.close-menu-icon {
    height: var(--font-size-32);
    width: var(--font-size-32);
    stroke: var(--stroke-color-neutral-dark);
    stroke-width: 2;
}

.item-media .icon-link,
.overlay-icon,
.card-media .icon-link  {
  width: var(--icon-width);
  height: var(--icon-width); 
  stroke: var(--stroke-color-brand-medium);
  stroke-width: var(--icon-stroke-width);
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.item-content:hover .icon-link,
li.product:hover .overlay-icon,
.swiper-card:hover .icon-link {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.5);
}

.originals .swiper-button-next, .originals .swiper-button-prev {
    color: var(--stroke-color-neutral-dark, var(--stroke-color-neutral-dark));
    transition: color var(--transition);
}

.originals .swiper-button-next:hover, .originals .swiper-button-prev:hover {
    color: var(--stroke-color-brand-medium, var(--stroke-color-brand-medium));
}

/* Buttons */

button,
.error404 button,
button.button,
button.btn,
button.wc-block-components-button,
a.button,
a.reset-artwork-filters,
.order-received-actions .button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce .order-received-actions a.button,
button#place_order,
.return-to-shop a.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button
 {
  display: var(--button-display);
  margin: var(--button-margin);
  padding: 0.5rem 1rem; 

  background: var(--button-surface-color);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-box-shadow);

  font-size: var(--button-text-size);
  font-weight: var(--button-text-weight);
  color: var(--button-text-color);

  transition: var(--button-transition);
}

button:hover,
button:focus,
.error404 button:hover,
.error404 button:focus,
button.button:hover,
button.button:focus,
button.btn:hover,
button.btn:focus,
button.wc-block-components-button:hover,
button.wc-block-components-button:focus,
a.button:hover,
a.button:focus,
a.reset-artwork-filters:hover,
.order-received-actions .button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce .order-received-actions a.button:hover,
button#place_order:hover,
.return-to-shop a.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover
 {
  background: var(--button-hover-surface-color);
  border: var(--button-hover-border);
  color: var(--button-hover-text-color);
  outline: none;
}

.main-navigation.mobile-header-navigation button {
  box-shadow: none;
}

/* woocommerce "place order" button */

.woocommerce-checkout .wc-block-components-button:not(.is-link),
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  font-family: var(--typeface-body);
  letter-spacing: var(--letter-spacing-small);
  padding: 0.75rem 1rem;
  transition: background-color var(--transition);
}

.woocommerce-checkout .wc-block-components-button:hover,
.woocommerce-checkout .wc-block-components-button:focus,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
  background-color: var(--button-hover-surface-color);
  border: var(--button-hover-border);
  color: var(--button-hover-text-color);
  outline: none;
}

.woocommerce-checkout .wc-block-components-button:focus,
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
  outline: none;
}

.return-to-shop a.button {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-small);
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{
    display: inline-block;

    margin: 0;
    padding: 0.5rem 1rem;

    background-color: var(--surface-color-brand-light);
    border: 1px solid var(--color-brand-400);
    border-radius: 0;

    color: var(--color-brand-500);


    box-shadow: var( --box-shadow-medium);

    font-size: var(--font-size-16);
    color: var(--color-brand-500);
    font-weight: var(--font-weight-medium);
}

.woocommerce-page div.product form.cart .button {
   display: inline-block;

   margin: 0;
   padding: 0.5rem 1rem;

   background-color: var(--surface-color-brand-light);
   border: 1px solid var(--stroke-color-brand-dark);
   border-color: var(--stroke-color-brand-dark);
   border-radius: 0;

   font-size: var(--font-size-16);
   color: var(--text-color-brand-dark);
   font-weight: var(--font-weight-medium);


   box-shadow: var( --box-shadow-medium); 

   transition: 
   background-color var(--transition), 
   border-color var(--transition), 
   color var(--text-color-brand-dark);
}

.woocommerce-page div.product form.cart .button:hover {
  background-color: var(--surface-color-neutral-light);
  border: 1px solid var(--stroke-color-neutral-dark);
  color: var(--text-color-neutral-dark);  
}

/* cart page: "proceed to chekout" button  */

.wc-block-cart__submit-container {
  background-color: var(--surface-color-brand-light);
  border: 1px solid var(--stroke-color-brand-dark);
  box-shadow: var(--button-box-shadow);
  transition: 
  background-color var(--transition), 
  border-color var(--transition);
}

.wc-block-cart__submit-container:hover,
.wc-block-cart__submit-container:focus{
  background-color: var(--surface-color-neutral-light);
  border: 1px solid var(--stroke-color-neutral-dark);
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
  box-shadow: none;
  outline: none;
}

a.wc-block-cart__submit-button {
  color: var(--text-color-brand-dark);
  transition: color var(--transition);
} 

.wc-block-cart__submit-container:hover a.wc-block-cart__submit-button {
  color: var(--text-color-neutral-dark);
} 

.wc-block-components-button__text {}

/* ========================
CARDS Page - Exhibitions
=========================== */

.sig-query {
  padding-bottom: var(--spacing-xxxl);
}

.sig-query .sig-items {
  display: block;
  column-count: 1;
  column-gap: 0; 
}

.sig-query .sig-item a {
  position: static;
}

.sig-query .sig-item a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

.sig-query .sig-item {
  position: relative;
  pointer-events: auto;  

  padding: 0;
  padding-bottom: 2rem;

  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;  
}

@media (width >= 48rem) {
  .sig-query .sig-items {
    column-count: 2;
    column-gap: 3rem;  
  }
  .sig-query .sig-item {
    padding: 0 0 2rem 0;
  }
}

@media (width >= 64rem) {
  .sig-query .sig-items {
    column-count: 2;
    column-gap: 6rem;
  }
  .sig-query .sig-item {
    padding: 0 0 4rem 0;   
  }
}

@media (width >= 80rem) {
  .sig-query .sig-items {
    column-count: 2;
    column-gap: 9rem;
  }
  .sig-query .sig-item {
    padding: 0 0 6rem 0;
  }
}

.sig-img-wrapper {
  position: relative;
}

.sig-img-wrapper img {
  display: block;
}

/* overlay defines the reference box */
.sig-item-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sig-icon-link {
  width: var(--icon-width);
  height: var(--icon-width);
  stroke: var(--stroke-color-brand-medium);
  stroke-width: var(--icon-stroke-width);

  opacity: 0;
  transform: scale(1);
  transition: opacity var(--transition), transform var(--transition);
}

.sig-item:hover .sig-icon-link {
  opacity: 1;
  transform: scale(1.5);
}

.sig-item-data {}

.sig-item .sig-item-title {
  margin-bottom: var(--spacing-m);
}

.sig-item-title,
.sig-item-title a {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  line-height: var(--line-height-1);
}

@media (width >= 48rem) {
  .sig-item-title,
  .sig-item-title a {
    font-size: var(--font-size-24);
  }
}

@media (width >= 64rem) {
  .sig-item-title,
  .sig-item-title a {
    font-size: var(--font-size-32);
  }  
}

@media (width >= 80rem) {
  .sig-item-title,
  .sig-item-title a {
    font-size: var(--font-size-32);
  }  
}

@media (hover: hover) {
  .sig-item:hover .sig-item-title a {
    color: var(--text-color-brand-medium);
  }
}

.sig-item-excerpt {
  font-family: var(--typeface-heading);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  margin-bottom: var(--spacing-xs);
}

.sig-read-more {
  display: block;
  position: relative;
  overflow: hidden; 

  width: 100%;
  padding: var(--spacing-xxs) 0;

  font-family: var(--typeface-heading);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;  

  
  transition: color var(--transition);
  z-index: 1; 
}

.sig-item-data {
  position: relative;
}

.sig-item-data::after {
  content: '';
  position: absolute;
  height: 2px;
  inset: calc(100% - 2px) 0 0 0;
  background-color: var(--surface-color-brand-medium);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
  z-index: 0;
}

@media (hover: hover) {
  .sig-item:hover .sig-item-data::after {
    transform: scaleX(1);
  }
  .sig-item:hover a.sig-read-more {
    color: var(--text-color-brand-medium);
  }  
}

/* ========================
CARDS:  Blog
=========================== */

.blog .site-main {
  display: block;
  padding-bottom: var(--spacing-xxxl);  
}

.blog .site-main .post {
  position: relative;
  pointer-events: auto;  

  padding: 0;
  padding-top: var(--spacing-l);

  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid; 
  }

@media (width >= 48rem) {
  .blog .site-main {
    column-count: 2;
    column-gap: clamp(2rem, 8vw, 10rem);
  }
  .blog .site-main .post {
    margin-bottom: 5rem;
  }    
}

@media (width >= 64rem) {
  .blog .site-main {
    column-count: 2;
  }
  .blog .site-main .post {
    margin-bottom: 4rem;
  }     
}

@media (width >= 80rem) {
  .blog .site-main {
    column-count: 3;
  }
  .blog .site-main .post {
    margin-bottom: 5rem;
  }  
}

.blog .post a{
  position: static;
}

.blog .post a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;  
}

.blog .post footer.entry-meta {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.blog .post footer.entry-meta .icon-categories{
  display: none;
}

.blog .post .cat-links {
  font-family: var(--typeface-heading);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase; 
  
  line-height: var(--line-height-5);

  padding: 0 0 0 var(--spacing-xxs);

  position: relative;
  overflow: hidden;
}

.blog .post .cat-links a {
  color: var(--text-color-neutral-dark);
  transition: color var(--transition);
  position: relative;
  z-index: 1;  
}

.blog .post .cat-links::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--surface-color-brand-medium);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
  z-index: 0;
}

@media (hover: hover) {
  .blog .post:hover .cat-links::before {
    transform: scaleX(1);
  }

  .blog .post:hover .cat-links a{
    color: var(--color-white);
  }
}

.blog .post .entry-header .entry-title{
  padding: 0 0 0 0;
} 

.blog .post .entry-header .entry-title,
.blog .post .entry-header .entry-title a {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  line-height: var(--line-height-3);
}

@media (width >= 48rem) {
  .blog .post .entry-header .entry-title,
  .blog .post .entry-header .entry-title a {
    font-size: var(--font-size-20);
  }
}

@media (width >= 64rem) {
  .blog .post .entry-header .entry-title,
  .blog .post .entry-header .entry-title a {
    font-size: var(--font-size-24);
  }  
}

@media (width >= 80rem) {
  .blog .post .entry-header .entry-title,
  .blog .post .entry-header .entry-title a {
    font-size: var(--font-size-24);
  }  
}

@media (hover: hover) {
.blog .post:hover .entry-header .entry-title a {
  color: var(--text-color-brand-medium);
}
}

.blog .post .post-image:not(:first-child) {
  margin-top: var(--spacing-m);
}

.blog .post .inside-article .post-image {
  margin-bottom: var(--spacing-s);
}

.blog .post .post-image {
  position: relative;
}

.blog .post .post-image::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  display: inline-block;
  content: '';
  width: 1.5em;
  height: 1.5em;
  background:
    url(../img/plus-hover.svg)   
    center center / 1.5em 1.5em 
    no-repeat ;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none; 
  z-index: 2;                
}

.blog .post:hover .post-image::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.5);
}

.blog .post .post-image img{
  opacity: 1;
  transition: opacity var(--transition);
}

@media (hover: hover) {
  .blog .post:hover .post-image img {
    opacity: 0.4;
  }  
}

.blog .post .entry-summary:not(:first-child){
  margin-top: 0;
}

.blog .post .entry-summary p {
  font-family: var(--typeface-heading);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  margin-bottom: var(--spacing-s);
}  

.blog .post .entry-summary .read-more{
  display: block;
  position: relative;
  overflow: hidden; 
  width: 100%;
  padding:  var(--spacing-s) 0  var(--spacing-xxs) 0;
  font-family: var(--typeface-heading);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;  
  transition: color var(--transition);
  z-index: 1; 
}

.blog .post .entry-summary .read-more::before {
  content: '';
  position: absolute;
  height: 2px;
  inset: calc(100% - 2px) 0 0 0;
  background-color: var(--surface-color-brand-medium);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
  z-index: 0;
}

@media (hover: hover) {
  .blog .post:hover .entry-summary .read-more::before {
    transform: scaleX(1);
  }
  .blog .post:hover .entry-summary .read-more {
    color: var(--text-color-brand-medium);
  }   
}

/* ==========================
Post cards - In the spotlight
============================= */

/* 1 .item-query {} */

.archive .item-query {
  padding: 0 0 var(--spacing-xxxl) 0;
}

.item-query .items {
  display: block;
  column-count: 1;
  column-gap: 0;
}

.item-query .items > * {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 0 0 2rem 0; 
}

@media (width >= 48rem) {
  .item-query .items {
    column-count: 2;
    column-gap: 3rem;
  }
  .item-query .items > * {
    padding: 0 0 2rem 0;
  }    
}

@media (width >= 64rem) {
  .item-query .items {
    column-count: 2;
    column-gap: 6rem;
  }
  .item-query .items > * {
    padding: 0 0 4rem 0;
  }     
}

@media (width >= 80rem) {
  .item-query .items {
    column-count: 2;
    column-gap: 9rem;
  }
  .item-query .items > * {
    padding: 0 0 6rem 0;
  }   
}

/* 3 .item-content {} */

.item-content {
  position: relative;
  pointer-events: auto;
}

/* Extend the link over the item surface */
.item-content a {
  position: static; 
}

.item-content a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

/* 4 .item-categories {} */

.item-categories {
  font-family: var(--typeface-heading);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;  
  position: relative;
  overflow: hidden;
}

.item-categories span {
  color: var(--text-color-neutral-dark);
  transition: color var(--transition);
  position: relative;
  z-index: 1;  
  margin-left: var(--spacing-xxs);
}

.item-categories::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--surface-color-brand-medium);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
  z-index: 0;
}

@media (hover: hover) {
  .item-content:hover .item-categories::before {
    transform: scaleX(1);
  }

  .item.product .item-categories::before {
    background: transparent;
    transform: none;
  }

  .item-content:hover .item-categories span{
    color: var(--color-white);
  }
}

/**
/* 5 .item-media {} 
*/

  .item-media {
    position: relative;
  } /* for positioning the plus icon over the image */

/**
/* 6 .item-image {} 
*/

.item-content img.item-image {
  opacity: 1;
  transition: opacity var(--transition);
  margin-bottom: var(--spacing-l);
}

.item.product .item-content img.item-image{
  opacity: 1;
  box-shadow: none;
  transition: 
    opacity var(--transition),
    box-shadow var(--transition);  
}

@media (hover: hover) {
  .item-content:hover img.item-image {
    opacity: 0.4;
  }

  .item.product .item-content:hover img.item-image {
    opacity: 0.4;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  }  
}

/**
/* 7 h3.item-info {} 
*/

/**
/* 8 .item-title {} 
*/

.item .item-title {
  margin-bottom: var(--spacing-m);
}

/**
/* 10 .item-title a {} 
*/

.item .item-title,
.item .item-title a {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);  
  line-height: var(--line-height-3);/* the em tag is inline and its line-height cannot be lower than its parent div */
  word-spacing: 0.3rem;
}

.item.product .item-title,
.item.product .item-title a {
  font-size: var(--font-size-20);
  line-height: var(--line-height-3);
}

@media (width >= 48rem) {
  .item .item-title,
  .item .item-title a {
    font-size: var(--font-size-24);
  }  
}

@media (width >= 64rem) {
  .item .item-title,
  .item .item-title a {
    font-size: var(--font-size-32);
  }  
}

@media (hover: hover) {
  .item-content:hover .item-title a {
    color: var(--text-color-brand-medium);
  }
}

/**
/* 11 p.item-excerpt {} 
*/

.item-excerpt {
  font-family: var(--typeface-heading);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  margin-bottom: var(--spacing-xs);
}

.item .item-read-more {
  display: block;
  position: relative;
  overflow: hidden; 

  width: 100%;
  padding: var(--spacing-xxs) 0;

  font-family: var(--typeface-heading);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-brand-medium);
  letter-spacing: var(--letter-spacing-small);
  text-transform: uppercase;  

  transition: color var(--transition);
  z-index: 1;
}

@media (hover: hover) {
  .item .item-read-more {
    color: var(--text-color-neutral-dark);
  }
}

.item-info {
  position: relative;
}

.item-info::after {
  content: '';
  position: absolute;
  height: 2px;
  inset: calc(100% - 2px) 0 0 0;
  background-color: var(--surface-color-brand-medium);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
  z-index: 0;
}

@media (hover: hover) {
  .item-content:hover .item-info::after {
    transform: scaleX(1);
  }
  .item-content:hover .item-read-more {
    color: var(--text-color-brand-medium);
  } 
}