/* ↓ Remove container declarations on Query Monitor debug panel that 
might be set from global style declaraions. */
#query-monitor-main :where(header, footer, main, section, article) {
  container-type: unset;
}

/* ↓ Remove padding when WooCommerce drawer is open. It causes entire
webpage content to shift when toggling such drawer. */
body.drawer-open {
  padding-right: 0 !important;
}

/**
** WORDPRESS SITE MAIN AREA 
*
* It contains <head>, <main> and <footer> landmark areas of a page.
* We want to make sure that site <footer> is pushed to the bottom
* independeing of page content length.
*/
.wp-site-blocks {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

/* Account for the case when site header is sticky to offset site content */
.wp-site-blocks > main,
/* 
↓ Woocommerce, due to compability issue with block and classic templates, wraps 
<main> element on some shop templates in a additional <div>.

See: https://github.com/woocommerce/woocommerce-blocks/pull/8364
*/ 
.wp-site-blocks > *:nth-child(2) {
  margin-top: calc(var(--is-header-sticky, 0) * var(--header-height, 0px)) !important;
}
/* -------------- END OF WORDPRESS SITE MAIN AREA ------------- */

/**
 ** CONTAINER QUERIES FOR KEY LAYOUT AREAS
 *
 * Container queries require a container to be explicitly defined. 
 * If none exists, they simply don't work — there is no fallback to media 
 * queries.
 *
 * To provide a reliable baseline for container-based responsive styles, 
 * we assign container-type to common landmark elements of the page. 
 * This ensures container queries function even when no more specific 
 * container is declared.
 */
.wp-site-blocks > :is(header, footer) {
  container-type: inline-size;
}
/* -------------- END OF CONTAINER QUERIES FOR KEY LAYOUT AREAS ------------- */

/**
** WORDPRESS SEARCH BLOCK
*
*/
.wp-block-search {
  --flow-space: 0;
  --input-padding: 0.5em 0.8em;
  --input-radius: var(--radius-xs);
  --input-background: var(--color-light);
  --input-icon-background: var(--color-primary);
  --input-icon-color: var(--color-dark-shade);
  --input-icon-height: 5ex;

  display: var(--form-display, inline-flex);
}

.wp-block-search__inside-wrapper {
  background: var(--input-background);
  border: 1px solid var(--input-icon-color);
  border-radius: var(--input-radius);
}

.wp-block-search input {
  padding: var(--input-padding);
  border: none;
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  text-overflow: ellipsis;
}

.wp-block-search .wp-block-search__button {
  margin-left: 0;
  padding: var(--input-padding);
  border: 1px solid var(--input-icon-background);
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
  background-color: var(--input-icon-background);
}

.wp-block-search .search-icon {
  width: auto;
  height: var(--input-icon-height);
  color: var(--input-icon-color);
  transform: rotateY(180deg);
}
/* -------------- END OF WORDPRESS SEARCH BLOCK ------------- */

/**
** WOOCOMMERCE MINICART TOGGLE
*
*/
.wm-mini-cart-wrapper {
  display: grid;
  grid-template-areas: "content";
  place-items: center;
}

.wm-mini-cart-wrapper > * {
  grid-area: content;
}

.wm-mini-cart-wrapper > .wm-icon {
  width: auto;
  height: var(--icon-link-svg-height, 2.2ex);
  pointer-events: none;
  z-index: 1;
}

.wc-block-mini-cart__button {
  min-height: var(--with-icon-hidden-label-min-tap-size, 44px);
  min-width: var(--with-icon-hidden-label-min-tap-size, 44px);
  padding: 0;
}

.wc-block-mini-cart__icon {
  opacity: 0;
}

.wc-block-mini-cart__badge {
  color: var(--color-dark-grey);
  background-color: var(--color-primary);
  font-size: var(--size-step--2);
  margin-left: -32%;
}
/* -------------- END OF WOOCOMMERCE MINICART TOGGLE ------------- */

/**
** WOOCOMMERCE MINICART
*
*/
.wc-block-components-drawer__screen-overlay:hover {
  --cursor-close-svg-url: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z' fill='%23252627' fill-opacity='0.12'/%3E%3Cpath d='M24 47C36.7025 47 47 36.7025 47 24C47 11.2975 36.7025 1 24 1C11.2975 1 1 11.2975 1 24C1 36.7025 11.2975 47 24 47Z' fill='white'/%3E%3Cpath d='M19 19L29 29M19 29L29 19.0009' stroke='%23252627' stroke-width='1.5'/%3E%3C/svg%3E");

  cursor: var(--cursor-close-svg-url) 28 28, auto;
}

.wc-block-mini-cart__drawer:hover {
  cursor: auto;
}

.wc-block-mini-cart__drawer {
  --drawer-width: var(--drawer-max-width, 550px);
  --neg-drawer-width: calc(var(--drawer-max-width, 550px) * -1);
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices {
  margin-right: 16px;
}

.wc-block-mini-cart-items {
  min-width: unset;
}

.wc-block-mini-cart__empty-cart-wrapper > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.wc-block-mini-cart__shopping-button {
  background-color: var(--color-primary);
  color: var(--color-dark-shade);
  border-radius: var(--radius-s);
  font-weight: var(--font-bold);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  flex-wrap: wrap;
  font-size: var(--text-size-base);
}

.wc-block-mini-cart__drawer .wc-block-components-product-name {
  color: inherit;
}

.wc-block-mini-cart__footer-actions {
  display: flex;
  /* ↓ Make space for close button */
  padding-right: calc(46.93px + 16px);
}

@media only screen and (max-width: 480px) {
  .wc-block-mini-cart__footer-actions > *:first-child {
    /* ↓ Make first cta element to ocupy entire width as close
    button was shifted down */
    margin-right: calc((46.93px + 16px) * -1);
  }
}

.wc-block-mini-cart__footer-actions .wc-block-components-button {
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  color: var(--color-dark-shade);
  box-shadow: inset 0 0 0 1px currentColor;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
  top: auto !important;
  bottom: calc(24px) !important;
  right: 16px !important;
  left: auto !important;
  margin: 0 !important;
  padding: calc(0.667em + 1px) !important;
  background: var(--color-light);
  color: var(--color-dark-shade);
  box-shadow: inset 0 0 0 1px currentColor;
  border-radius: var(--radius-xs);
}
/* -------------- END OF WOOCOMMERCE MINICART ------------- */

/**
** WOOCOMMERCE STORE NOTICE
*
*/
.woocommerce.wc-block-store-notices.alignwide {
  max-width: var(--measure);
}

.wc-block-components-notice-banner + .wc-block-components-notice-banner {
  margin-block-start: var(--gutter);
}

.wc-block-components-notice-banner {
  scroll-margin-top: calc(var(--header-height, 0) + 1rem);
  border-radius: var(--radius-m);
}

.wc-block-components-notice-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wc-block-components-notice-banner__content .wc-forward {
  white-space: nowrap;
}
/* -------------- END OF WOOCOMMERCE STORE NOTICE ------------- */

/**
** WOOCOMMERCE BREADCRUMBS
*
*/
.woocommerce-breadcrumb {
  display: flex !important;
  flex-wrap: wrap;
  margin: 0 !important;
  font-size: var(--size-step--2) !important;
}

.woocommerce-breadcrumb > * + * {
  margin-inline-start: var(--space-2xs);
}

.woocommerce-breadcrumb > * {
  margin-inline-end: var(--space-2xs);
}
/* -------------- END OF WOOCOMMERCE BREADCRUMBS ------------- */

/* -------------- WOOCOMMERCE CATALOG SORTING ------------- */
.wc-block-catalog-sorting {
  font-size: var(--text-size-base) !important;
}

.wc-block-catalog-sorting select {
  /* --focus-ring-color: var(--color-primary); */
  --stroke-color: var(--color-light-glare);
  color: var(--color-light-glare);
  background-color: transparent;
  border: 1px solid var(--color-light-glare);
  appearance: none; /* Disable the default arrow */
  -webkit-appearance: none; /* For WebKit-based browsers */
  -moz-appearance: none; /* For Firefox */
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="white"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1.5rem;
  margin-right: 24px; /* Make space for the arrow icon */
  cursor: pointer;
}

.wc-block-catalog-sorting select option {
  color: black;
}
/* -------------- END OF WOOCOMMERCE CATALOG SORTING ------------- */

/**
** WOOCOMMERCE CHECKOUT PAGE
*
*/
.wc-block-cart-items {
  min-width: unset;
}
/* -------------- END OF WOOCOMMERCE CHECKOUT PAGE ------------- */

/**
** WOOCOMMERCE SINGLE PRODUCT PAGE
*
*/
/* Sales Badge */
.wm-single-product span.onsale {
  width: fit-content;
  min-height: auto;
  min-width: auto;
  border: 1px solid #43454b;
  border-radius: 4px;
  padding: 0.25em 0.75em;
  color: #43454b;
  background: #fff;
  background: var(--color-primary);
  font-size: 0.875em;
  font-weight: 600;
  line-height: inherit;
  text-align: center;
  text-transform: uppercase;
  top: -0.5em !important;
  left: -0.5em !important;
}
/* -------------- */
/* -------------- END OF WOOCOMMERCE SINGLE PRODUCT PAGE ------------- */

/**
** WOOCOMMERCE PRODUCT CARD TEMPLATE
*
*/
.wc-block-product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-s);
  border-radius: var(--radius-m);
  color: var(--color-dark-shade);
  background: var(--color-light-glare);
  font-size: var(--size-step--2);
}

.wc-block-product:has(a:hover) {
  background-color: #f7edc8;
}

.wc-block-product img {
  border-radius: var(--radius-s);
}

.wc-block-product .wp-block-woocommerce-product-image {
  align-self: center;
}

.wc-block-product .wp-block-woocommerce-product-image > a {
  height: 300px;
  display: inline-flex;
  align-items: flex-end;
}

.wc-block-product .wp-block-woocommerce-product-image img {
  object-fit: contain;
}

.wc-block-product .wp-block-post-title {
  font-size: var(--text-size-base) !important;
  text-align: start;
}

/* Trim product title down 2 lines max */
.wc-block-product .wp-block-post-title > * {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wc-block-product .wp-block-woocommerce-product-price {
  margin-top: auto;
}

.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
  font-size: var(--size-step-0);
}

.wc-block-product .wp-block-button.wc-block-components-product-button {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  white-space: normal;
  word-break: break-word;
}

.wc-block-product a.added_to_cart,
.wc-block-product.outofstock .wc-block-components-product-button__button {
  display: var(--button-display, inline-flex);
  justify-content: var(--button-justify-content, center);
  align-items: var(--button-align-items, center);
  display: inline-flex;
  justify-content: center;
  margin-top: 0;
  padding: var(--button-padding, var(--space-xs, 0.8em) var(--space-m, 2em));
  border-radius: var(--radius-s);
  background: transparent;
  color: currentColor;
  font-family: var(--font-display);
  font-size: var(--size-step--2);
  line-height: inherit;
  text-transform: uppercase;
}

.wc-block-product .add_to_cart_button {
  --button-bg: var(--button-primary-bg);
  --button-text: var(--button-primary-text);
  --button-border-color: var(--button-primary-border-color);

  display: var(--button-display, inline-flex);
  justify-content: var(--button-justify-content, center);
  align-items: var(--button-align-items, center);
  gap: var(--button-gap, var(--gutter));
  padding: var(--button-padding, var(--space-xs, 0.8em) var(--space-m, 2em));
  border-color: var(--button-border-color);
  border-radius: var(--button-radius, var(--radius-m));
  border-style: var(--button-border-style, solid);
  border-width: var(--button-border-width, var(--stroke-weight-light));
  box-shadow: var(--button-box-shadow, none);
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--button-font-family, var(--font-display));
  font-size: var(--button-font-size, var(--size-step--3));
  font-weight: var(--button-font-weight, var(--font-bold));
  letter-spacing: var(--button-kerning, var(--kerning));
  line-height: var(--button-line-height, var(--leading));
  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  cursor: pointer;
}

.wc-block-product .added_to_cart,
.wc-block-product.outofstock .wc-block-components-product-button__button {
  border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 1px currentColor;
  text-transform: uppercase;
  font-family: var(--font-display);
  display: inline-flex;
  width: 100%;
  background: transparent;
  color: currentColor;
  line-height: inherit;
  justify-content: center;
  padding: var(--button-padding, var(--space-xs, 0.8em) var(--space-m, 2em));
}

.wc-block-product {
  position: relative;
}

.wc-block-product .wc-block-components-product-sale-badge {
  position: absolute;
  top: 0;
  right: 0;
}

.wc-block-product.outofstock [data-badge="out-of-stock"] {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);

  background: #fff;
  border: 1px solid var(--color-secondary-shade);
  border-radius: 4px;
  color: var(--color-secondary-shade);
  font-size: 0.875em;
  font-weight: 600;
  padding: 0.25em 0.75em;
  text-align: center;
  text-transform: uppercase;
  z-index: 9;
}

.wc-block-product.outofstock .wp-block-woocommerce-product-sale-badge {
  display: none;
}

/* -------------- END OF WOOCOMMERCE PRODUCT CARD TEMPLATE ------------- */

/**
** WOOCOMMERCE PRODUCTS COLLECTION
*
*/
.wp-block-woocommerce-product-collection > .wp-block-heading {
  font-size: var(--size-step-3);
}

.wp-block-woocommerce-product-collection > .wp-block-woocommerce-product-template {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
  column-gap: var(--grid-column-gap, var(--space-2xs));
  row-gap: var(--grid-row-gap, var(--space-2xs));
  margin-top: 0;
}

.wc-block-product-template.is-flex-container > * {
  width: auto !important;
}

/* Book outer lighting effects */
.wc-block-components-product-image {
  /* display: grid !important;
  grid-template-areas: "content";
  margin-bottom: 2.75rem;
  border-radius: var(--radius-s);
  box-shadow: 10px 10px 20px -4px #00000030;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out; */
}

/* .wc-block-components-product-image:has(a:hover) {
  transform: perspective(2000px) rotateY(-30deg);
  -webkit-transform: perspective(2000px) rotateY(-30deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  box-shadow: inset 4px 1px 3px #ffffff60, inset 0 -1px 2px #00000080, 10px 0px 10px -5px #00000030;
} */

.wc-block-components-product-image > a {
  /* grid-area: content; */
  /* order: 1; */
}

/* Book inner lighting effects */
.wc-block-components-product-image::before {
  /* content: "";
  grid-area: content;
  order: 2;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-s); */
  /* top and left inner shadow then bottom and right */
  /* box-shadow: ; */
  /* top and left light reflection effect inset 4px 1px 3px hsla(0, 0%, 100%, 0.376); */
  /* bottom and right shadow effect inset 0 -1px 2px hsla(0, 0%, 0%, 0.502); */
  /* pointer-events: none; */
}

/* Book spine joint effect */
.wc-block-components-product-image::after {
  /* content: "";
  grid-area: content;
  order: 3;
  width: 20px;
  height: 100%;
  margin-left: 10px;
  border-left: 2px solid #00000010; */
  /* light reflection after the spine */
  /* background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0.2) 0%, hsla(0, 0%, 100%, 0) 100%);
  pointer-events: none;
  transition: all 0.5s ease; */
}

/* Increase light reflection before the spine joint. HIGH GPU usage */
.wc-block-components-product-image:has(a:hover)::after {
  /* width: 40px; */
}

.wc-block-components-product-image > a {
  /* display: grid !important;
  grid-template-areas: "content"; */
}

.wc-block-components-product-image > a > * {
  /* grid-area: content; */
}

/* .wc-block-components-product-image > a::before {
  content: "";
  grid-area: content;
  place-self: center;
  width: calc(100% - 2px);
  height: 96%;
  top: 2%;
  border: 1px solid grey;
  border-radius: var(--radius-xs);
  background: white;
  box-shadow: inset -2px 0 0 grey, inset -3px 0 0 #dbdbdb, inset -4px 0 0 white, inset -5px 0 0 #dbdbdb,
    inset -6px 0 0 white, inset -7px 0 0 #dbdbdb, inset -8px 0 0 white, inset -9px 0 0 #dbdbdb;
} */
/* -------------- END OF WOOCOMMERCE RELATED PRODUCTS TEMPLATE ------------- */

/**
** PHOTOSWIPE GALLERY
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.pswp {
  /* ↓ make sure that photo gallery is shown on top of everything */
  z-index: 99999 !important;
}

.woocommerce-product-gallery__trigger {
  outline: 1px solid var(--color-light-shade);
}
/* -------------- END OF PHOTOSWIPE GALLERY ------------- */