/*
Theme Name: Etch Theme
Theme URI: https://etchwp.com/
Author: Digital Gravy
Author URI: https://digitalgravy.co
Description: Your unified development environment for WordPress.
Tags: Etch, Block Authoring
Requires at least: 6.1
Requires PHP: 8.0
Tested up to: 6.9
Version: 0.0.7
Text Domain: etch-theme

License: GPL v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.txt

*/

/* Perry's Client View route styling.
 * Scoped to Vuer-generated route pages so Etch-built pages are unaffected.
 */

.vue-plugin-shell #vue-plugin-app {
  width: min(var(--content-width, 85.375rem), calc(100% - (var(--gutter, 2rem) * 2)));
  max-width: var(--content-width, 85.375rem) !important;
}

.vue-plugin-shell #vue-plugin-app > .vue-plugin-template-category-default,
.vue-plugin-shell #vue-plugin-app > .product-information {
  padding-block: var(--section-padding, clamp(4rem, 5vw, 6rem));
  padding-inline: 0;
}

/* Category routes */
.vue-plugin-shell #vue-plugin-app > .vue-plugin-template-category-default {
  gap: var(--gap-xl, clamp(3rem, 2rem + 3vw, 4.625rem));
}

.vue-plugin-shell .vue-plugin-template-category-default > h1 {
  position: relative;
  max-width: 18ch;
  padding-block-end: var(--gap-small, 1rem);
}

.vue-plugin-shell .vuer-category-archive-layout {
  margin-block: 0;
}

.vue-plugin-shell .vuer-category-archive-layout--with-filters {
  grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
  gap: var(--gap-xl, clamp(3rem, 2rem + 3vw, 4.625rem));
}

.vue-plugin-shell .vuer-category-filters__desktop-sidebar {
  position: sticky;
  inset-block-start: var(--gap, 1.5rem);
  padding: var(--gap, 1.5rem);
  border: var(--border-width, 1px) solid var(--border-color, #d8d1c3);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--surface-color, #f4f0e6);
}

.vue-plugin-shell .vuer-product-filter-controls__group {
  border-color: var(--border-color, #d8d1c3);
}

.vue-plugin-shell .vuer-product-filter-controls__group:first-of-type {
  border-block-start: 0;
}

.vue-plugin-shell .vuer-product-filter-controls__summary {
  min-height: 3.25rem;
  padding-block: 0.875rem;
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--body-color-strong, #272624);
}

.vue-plugin-shell .vuer-product-filter-controls__option {
  min-height: 2.5rem;
  color: var(--body-color, #4b4a46);
}

.vue-plugin-shell .vuer-product-filter-controls__option input {
  accent-color: var(--secondary-theme-color, #706e68);
}

.vue-plugin-shell .vuer-category-products-status {
  margin-block-end: var(--gap, 1.5rem);
  color: var(--body-color, #4b4a46);
  font-size: var(--small, 0.9375rem);
}

.vue-plugin-shell .vue-plugin-product-stack,
.vue-plugin-shell .product-grid-section__grid {
  gap: var(--gap-large, clamp(2rem, 1.5rem + 1.5vw, 2.5rem));
}

.vue-plugin-shell .vue-plugin-product-card {
  overflow: hidden;
  border: var(--border-width, 1px) solid var(--border-color, #d8d1c3);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--page-background, #fff);
  transition: transform var(--transition, 0.2s ease),
    border-color var(--transition, 0.2s ease),
    box-shadow var(--transition, 0.2s ease);
}

.vue-plugin-shell .vue-plugin-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-theme-color-dark, #d9c47e);
  box-shadow: 0 0.75rem 2rem rgb(39 38 36 / 10%);
}

.vue-plugin-shell .vue-plugin-product-card__link {
  gap: 0;
  padding: 0;
  color: var(--heading-color, #000);
}

.vue-plugin-shell .vue-plugin-product-card__image {
  transition: transform 0.35s ease;
}

.vue-plugin-shell .vue-plugin-product-card:hover .vue-plugin-product-card__image {
  transform: scale(1.025);
}

.vue-plugin-shell .vue-plugin-product-card__heading {
  min-height: 5rem;
  align-content: center;
  padding: var(--gap, 1.5rem);
}

.vue-plugin-shell .vue-plugin-product-card__title {
  text-align: start;
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem);
  line-height: 1.15;
}

.vue-plugin-shell .vue-plugin-product-card__price-range {
  padding-inline: var(--gap, 1.5rem);
  padding-block-end: var(--gap, 1.5rem);
  text-align: start;
  color: var(--body-color, #4b4a46);
}

.vue-plugin-shell .vue-plugin-product-card__design-center-icon {
  width: 2.5rem;
  height: 2.5rem;
  top: 0.75rem;
  left: 0.75rem;
}

.vue-plugin-shell .vuer-category-filters__mobile-trigger,
.vue-plugin-shell .vuer-category-filter-drawer__apply {
  min-height: 2.75rem;
  border: var(--border-width, 1px) solid var(--secondary-theme-color, #706e68);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--secondary-theme-color, #706e68);
  color: var(--light-theme-color, #fff);
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Product routes */
.vue-plugin-shell #vue-plugin-app > .product-information {
  margin-block-start: 0;
}

.vue-plugin-shell .product-desktop-sticky-boundary,
.vue-plugin-shell .product-skeleton {
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
  gap: var(--gap-xl, clamp(3rem, 2rem + 3vw, 4.625rem));
}

.vue-plugin-shell .product-breadcrumbs {
  margin-block-end: var(--gap, 1.5rem);
  font-size: var(--small, 0.9375rem);
}

.vue-plugin-shell .product-breadcrumbs a,
.vue-plugin-shell .product-breadcrumbs span {
  color: var(--body-color, #4b4a46);
}

.vue-plugin-shell .product-breadcrumbs a:hover {
  color: var(--heading-color, #000);
  text-decoration: underline;
}

.vue-plugin-shell .product-hero__main-img {
  overflow: hidden;
  border-radius: var(--image-radius, 0.25rem);
  background: var(--surface-color, #f4f0e6);
}

.vue-plugin-shell #vue-plugin-app .product-thumbnails ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-block-start: var(--gap-small, 1rem);
  padding: 0;
  gap: var(--gap-small, 1rem);
}

.vue-plugin-shell #vue-plugin-app .product-thumbnails li {
  min-width: 0;
}

.vue-plugin-shell .product-thumbnails__button {
  display: block;
  width: 100%;
  border-color: var(--border-color, #d8d1c3);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--page-background, #fff);
}

.vue-plugin-shell .product-thumbnails__button img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vue-plugin-shell .product-thumbnails__button.is-selected {
  border-color: var(--secondary-theme-color, #706e68);
}

.vue-plugin-shell .product-options > h1 {
  margin-block-end: var(--gap, 1.5rem);
}

.vue-plugin-shell .description-dropdown,
.vue-plugin-shell .product-variation-options,
.vue-plugin-shell .vue-plugin-product-notes,
.vue-plugin-shell .product-add-to-cart,
.vue-plugin-shell .add-to-quote-toast {
  max-width: none;
}

.vue-plugin-shell .product-dropdown__toggle {
  min-height: var(--input-height, 3.625rem);
  padding: 0.75rem 3.25rem 0.75rem 1rem;
  border-color: var(--input-border-color, #d8d1c3);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--input-background, #fff);
  color: var(--body-color-strong, #272624);
}

.vue-plugin-shell .product-dropdown__toggle:hover,
.vue-plugin-shell .product-dropdown__toggle:focus-visible {
  border-color: var(--secondary-theme-color, #706e68);
  box-shadow: 0 0 0 2px rgb(112 110 104 / 12%);
}

.vue-plugin-shell .description-dropdown__content {
  padding: var(--gap, 1.5rem);
  border-color: var(--border-color, #d8d1c3);
  border-radius: 0 0 var(--border-radius, 0.25rem) var(--border-radius, 0.25rem);
  color: var(--body-color, #4b4a46);
}

.vue-plugin-shell .product-variation-options {
  gap: var(--gap, 1.5rem);
  margin-block-start: var(--gap, 1.5rem);
}

.vue-plugin-shell .product-variation-options__field label {
  margin-block-end: 0.375rem;
  color: var(--body-color-strong, #272624);
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
}

.vue-plugin-shell .product-variation-options__panel {
  --vuer-attribute-panel-border: var(--border-color, #d8d1c3);
  --vuer-attribute-option-hover: var(--surface-color, #f4f0e6);
  --vuer-attribute-option-selected: var(--secondary-theme-color, #706e68);
  --vuer-attribute-option-radius: var(--border-radius, 0.25rem);
  box-shadow: 0 0.75rem 2rem rgb(39 38 36 / 10%);
}

.vue-plugin-shell .vue-plugin-product-notes {
  margin-block-start: var(--gap-small, 1rem);
}

.vue-plugin-shell .product-add-to-cart {
  min-height: var(--input-height, 3.625rem);
  border-color: var(--secondary-theme-color, #706e68);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--secondary-theme-color, #706e68);
  color: var(--light-theme-color, #fff);
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vue-plugin-shell .product-add-to-cart:hover {
  border-color: var(--body-color-strong, #272624);
  background: var(--body-color-strong, #272624);
  opacity: 1;
}

.vue-plugin-shell .product-collection-includes,
.vue-plugin-shell .related-products {
  margin-block-start: var(--section-padding-small, clamp(2.5rem, 3.5vw, 4.125rem));
  padding-block-start: var(--section-padding-small, clamp(2.5rem, 3.5vw, 4.125rem));
  border-block-start: var(--border-width, 1px) solid var(--border-color, #d8d1c3);
}

.vue-plugin-shell .product-collection-includes > h2,
.vue-plugin-shell .related-products > h2 {
  margin-block-end: var(--gap-large, 2.5rem);
}

/* Quote cart route */
.vue-plugin-shell #vue-plugin-app > .vue-plugin-template-cart {
  --vuer-checkout-border: var(--border-color, #d8d1c3);
  --vuer-checkout-primary: var(--secondary-theme-color, #706e68);
  --vuer-checkout-primary-contrast: var(--light-theme-color, #fff);
  --vuer-checkout-surface: var(--page-background, #fff);
  --vuer-checkout-muted-surface: var(--surface-color, #f4f0e6);
  --vuer-checkout-text-muted: var(--body-color, #4b4a46);
  --vuer-checkout-radius: var(--border-radius, 0.25rem);
  width: 100%;
  padding-block: var(--section-padding, clamp(4rem, 5vw, 6rem));
  padding-inline: 0;
}

.vue-plugin-shell .vue-plugin-cart-header {
  padding-block-end: var(--gap-large, 2.5rem);
  border-color: var(--border-color, #d8d1c3);
}

.vue-plugin-shell .vue-plugin-cart-header__continue,
.vue-plugin-shell .vue-plugin-cart-summary__continue,
.vue-plugin-shell .vue-plugin-cart-empty a {
  color: var(--body-color-strong, #272624);
  text-underline-offset: 0.2em;
}

.vue-plugin-shell .vue-plugin-cart-header__continue {
  margin-block-end: var(--gap, 1.5rem);
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vue-plugin-shell .vue-plugin-cart-header__continue:hover,
.vue-plugin-shell .vue-plugin-cart-summary__continue:hover,
.vue-plugin-shell .vue-plugin-cart-empty a:hover {
  text-decoration: underline;
  opacity: 1;
}

.vue-plugin-shell .vue-plugin-cart-header h1 {
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  line-height: 1.05;
}

.vue-plugin-shell .vue-plugin-cart-header__title-row > div > p {
  max-width: 48rem;
  margin-block-start: var(--gap-small, 1rem);
  font-size: 1rem;
}

.vue-plugin-shell .vue-plugin-cart-header__count {
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vue-plugin-shell .vue-plugin-cart-layout {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  gap: var(--gap-xl, clamp(3rem, 2rem + 3vw, 4.625rem));
  padding-block-start: var(--gap-large, 2.5rem);
}

.vue-plugin-shell .vue-plugin-cart-section-header,
.vue-plugin-shell .vue-plugin-cart-products__header {
  padding-block-end: var(--gap, 1.5rem);
  border-color: var(--border-color, #d8d1c3);
}

.vue-plugin-shell .vue-plugin-cart-section-header h2,
.vue-plugin-shell .vue-plugin-cart-summary__header h2 {
  font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.75rem);
}

.vue-plugin-shell .vue-plugin-cart-item {
  gap: var(--gap, 1.5rem);
  padding-block: var(--gap, 1.5rem);
  border-color: var(--border-color, #d8d1c3);
}

.vue-plugin-shell .vue-plugin-cart-item__media,
.vue-plugin-shell .vue-plugin-cart-item__image,
.vue-plugin-shell .vue-plugin-cart-item__image-placeholder {
  width: 7rem;
  height: 7rem;
  border-radius: var(--image-radius, 0.25rem);
}

.vue-plugin-shell .vue-plugin-cart-item__image,
.vue-plugin-shell .vue-plugin-cart-item__image-placeholder {
  border-color: var(--border-color, #d8d1c3);
  background: transparent;
}

.vue-plugin-shell .vue-plugin-cart-item__title {
  font-size: 1.125rem;
  line-height: 1.25;
}

.vue-plugin-shell .vue-plugin-cart-item__quantity,
.vue-plugin-shell .vue-plugin-cart-item__notes textarea,
.vue-plugin-shell .vue-plugin-checkout-field input,
.vue-plugin-shell .vue-plugin-checkout-field select {
  border-color: var(--input-border-color, #d8d1c3);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--input-background, #fff);
}

.vue-plugin-shell .vue-plugin-cart-item__notes textarea,
.vue-plugin-shell .vue-plugin-checkout-field input,
.vue-plugin-shell .vue-plugin-checkout-field select {
  transition: border-color var(--transition, 0.2s ease),
    box-shadow var(--transition, 0.2s ease);
}

.vue-plugin-shell .vue-plugin-cart-item__notes textarea:focus-visible,
.vue-plugin-shell .vue-plugin-checkout-field input:focus-visible,
.vue-plugin-shell .vue-plugin-checkout-field select:focus-visible {
  border-color: var(--secondary-theme-color, #706e68);
  outline: 0;
  box-shadow: 0 0 0 2px rgb(112 110 104 / 12%);
}

.vue-plugin-shell .vue-plugin-cart-summary,
.vue-plugin-shell .vue-plugin-cart-empty,
.vue-plugin-shell .vue-plugin-checkout-loading,
.vue-plugin-shell .vue-plugin-checkout-billing-fields {
  border-color: var(--border-color, #d8d1c3);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--surface-color, #f4f0e6);
}

.vue-plugin-shell .vue-plugin-cart-summary {
  top: var(--gap, 1.5rem);
  padding: var(--gap-large, 2rem);
  box-shadow: 0 0.75rem 2rem rgb(39 38 36 / 8%);
}

.vue-plugin-shell .vue-plugin-cart-empty,
.vue-plugin-shell .vue-plugin-checkout-loading {
  margin-block-start: var(--gap-large, 2.5rem);
  padding: clamp(2rem, 4vw, 3.5rem);
}

.vue-plugin-shell .vue-plugin-checkout-submit {
  min-height: var(--input-height, 3.625rem);
  border-color: var(--secondary-theme-color, #706e68);
  border-radius: var(--border-radius, 0.25rem);
  background: var(--secondary-theme-color, #706e68);
  color: var(--light-theme-color, #fff);
  font-size: var(--small, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vue-plugin-shell .vue-plugin-checkout-submit:hover:not(:disabled) {
  border-color: var(--body-color-strong, #272624);
  background: var(--body-color-strong, #272624);
  opacity: 1;
}

@media (max-width: 56.25rem) {
  .vue-plugin-shell .vuer-category-archive-layout--with-filters {
    display: block;
  }

  .vue-plugin-shell .product-desktop-sticky-boundary,
  .vue-plugin-shell .product-skeleton {
    grid-template-columns: 1fr;
  }

  .vue-plugin-shell .product-options {
    margin-block-start: var(--gap-large, 2.5rem);
  }

  .vue-plugin-shell .vue-plugin-cart-layout {
    grid-template-columns: 1fr;
    gap: var(--gap-large, 2.5rem);
  }

  .vue-plugin-shell .vue-plugin-cart-summary {
    position: static;
  }
}

@media (max-width: 37.5rem) {
  .vue-plugin-shell #vue-plugin-app {
    width: calc(100% - 2rem);
    margin-inline: 1rem;
  }

  .vue-plugin-shell #vue-plugin-app > .vue-plugin-template-category-default,
  .vue-plugin-shell #vue-plugin-app > .product-information,
  .vue-plugin-shell #vue-plugin-app > .vue-plugin-template-cart {
    padding-block: var(--section-padding-small, clamp(2.5rem, 3.5vw, 4.125rem));
  }

  .vue-plugin-shell .vue-plugin-template-category-default {
    gap: var(--gap-large, 2rem);
  }

  .vue-plugin-shell .vue-plugin-product-card__heading {
    min-height: auto;
    padding: var(--gap, 1.25rem);
  }

  .vue-plugin-shell .vue-plugin-cart-header__title-row {
    gap: var(--gap-small, 1rem);
  }

  .vue-plugin-shell .vue-plugin-cart-header h1 {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }

  .vue-plugin-shell .vue-plugin-cart-item {
    gap: var(--gap-small, 1rem);
  }

  .vue-plugin-shell .vue-plugin-cart-summary {
    padding: var(--gap, 1.5rem);
  }
}