/* Shop sample-chip selector. Product and variation data is supplied by
   WooCommerce; this file only presents the interaction on the preserved shop. */
.gs-card .gs-swatch-fill { position: relative; overflow: hidden; }
.gs-card .gs-swatch-fill > img.gs-swatch-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
}
.gs-card[data-gs-product-card] .gs-swatch.is-active,
.gs-card[data-gs-product-card] .gs-swatch[aria-pressed="true"] {
  outline: 1px solid #2a2720;
  outline-offset: 3px;
}

.gs-shop-sample-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
}

.gs-shop-sample-add,
.gs-product-card__sample {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a2720;
  padding: .65rem .9rem;
  background: transparent;
  color: #2a2720;
  font: 400 .72rem/1.3 var(--gs-font-sans, sans-serif);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.gs-shop-sample-add:hover,
.gs-shop-sample-add:focus-visible,
.gs-product-card__sample:hover,
.gs-product-card__sample:focus-visible {
  background: #2a2720;
  color: #f4eee0;
}

.gs-shop-sample-add:disabled {
  border-color: #b8ad9a;
  color: #8b8376;
  cursor: not-allowed;
  opacity: .72;
}
.gs-shop-sample-add:disabled:hover { background: transparent; color: #8b8376; }

.gs-sample-tray-tab {
  position: fixed;
  z-index: 90;
  right: 1.25rem;
  bottom: 1.25rem;
  min-height: 3rem;
  border: 1px solid #2a2720;
  padding: .8rem 1rem;
  background: #2a2720;
  color: #f4eee0;
  font: 400 .72rem/1 var(--gs-font-mono, monospace);
  letter-spacing: .05em;
  cursor: pointer;
}

.gs-sample-tray-tab b { margin-left: .35rem; font-weight: 400; }
.gsx-toolbar .gs-sample-tray-tab { position: static; margin-left: auto; }
.gs-sample-tray-overlay { position: fixed; z-index: 998; inset: 0; background: rgb(20 18 13 / .4); }
.gs-sample-tray-overlay[hidden], .gs-sample-tray[hidden], .gs-sample-toast[hidden] { display: none !important; }
.gs-sample-tray {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  display: grid;
  width: min(30rem, 100%);
  height: 100dvh;
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid #d4c8b4;
  background: #f4eee0;
  color: #2a2720;
  box-shadow: -1rem 0 3rem rgb(20 18 13 / .12);
  transform: translateX(100%);
  transition: transform .3s ease;
}

.gs-sample-tray.is-open { transform: translateX(0); }
.gs-sample-tray > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #d4c8b4; }
.gs-sample-tray h2 { margin: 0; font: 400 2rem/1 var(--gs-font-serif, serif); }
.gs-sample-tray > header button { border: 0; padding: .25rem; background: transparent; font-size: 1.8rem; cursor: pointer; }
.gs-sample-tray__body { overflow: auto; padding: 1.5rem; }
.gs-sample-tray__note { margin: 0 0 1.25rem; padding: 1rem; background: #eee4d2; color: #655f55; font-size: .8rem; line-height: 1.65; }
.gs-sample-tray__empty { color: #655f55; text-align: center; }
.gs-sample-tray__item { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid #d4c8b4; }
.gs-sample-tray__item img { width: 4rem; height: 4rem; object-fit: cover; }
.gs-sample-tray__item div { display: grid; gap: .25rem; }
.gs-sample-tray__item strong { font-size: .82rem; }
.gs-sample-tray__item span { color: #655f55; font-size: .75rem; }
.gs-sample-tray__item button { border: 0; background: transparent; font-size: 1.25rem; cursor: pointer; }
.gs-sample-tray__item .gs-sample-tray__quantity { display: flex; align-items: center; justify-content: flex-start; gap: 0; width: max-content; margin-top: .35rem; border: 1px solid #d4c8b4; }
.gs-sample-tray__quantity button { width: 2.75rem; min-height: 2.75rem; padding: 0; color: #2a2720; line-height: 1; }
.gs-sample-tray__quantity input { width: 3.5rem; min-height: 2.75rem; margin: 0; padding: .25rem; border: 0; border-radius: 0; background: transparent; color: #2a2720; font: inherit; font-size: .85rem; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.gs-sample-tray__quantity input::-webkit-inner-spin-button, .gs-sample-tray__quantity input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.gs-sample-tray__quantity button:disabled, .gs-sample-tray__quantity input:disabled { opacity: .45; cursor: not-allowed; }
.gs-sample-tray__quantity :focus-visible { outline: 2px solid #8b672e; outline-offset: 2px; }
.gs-sample-tray > footer { padding: 1.5rem; border-top: 1px solid #d4c8b4; }
.gs-sample-tray > footer > p:first-child { display: flex; justify-content: space-between; margin: 0 0 1rem; }
.gs-sample-tray > footer > button { width: 100%; min-height: 3.2rem; border: 1px solid #2a2720; background: #2a2720; color: #f4eee0; cursor: pointer; }
.gs-sample-tray > footer > button:disabled { cursor: not-allowed; opacity: .45; }
.gs-sample-tray__error { margin: .8rem 0 0; color: #8a3027; font-size: .76rem; }
.gs-sample-toast { position: fixed; z-index: 1000; left: 50%; bottom: 1.25rem; padding: .8rem 1rem; background: #2a2720; color: #f4eee0; font-size: .78rem; transform: translateX(-50%); }
body.gs-sample-tray-open { overflow: hidden; }

@media (max-width: 47.938rem) {
  .gs-shop-sample-actions, .gs-shop-sample-add { width: 100%; }
  .gs-sample-tray-tab { right: .75rem; bottom: .75rem; }
  .gsx-toolbar .gs-sample-tray-tab { width: auto; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-sample-tray { transition: none; }
}