.product-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.product-open img {
  display: block;
}

.quick-add {
  z-index: 2;
}

.product-details-button {
  margin-top: 12px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid #9b875f;
  background: transparent;
  color: #7b643d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.product-details-button:hover {
  color: #11110f;
  border-bottom-color: #11110f;
}

.product-open:focus-visible {
  outline: 3px solid #c29b55;
  outline-offset: -3px;
}

.product-card {
  cursor: pointer;
}

.modal-image-slot {
  background: #dedbd4;
  position: relative;
  min-height: 570px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-image-slot .modal-image {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
}

.modal-gallery-controls {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.modal-gallery-controls button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 15, 0.82);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  display: grid;
  place-items: center;
  pointer-events: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

.modal-gallery-controls span {
  display: none;
}

.modal-gallery-thumbs {
  position: static;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: #efece6;
  border-top: 1px solid #d9d5cc;
}

.modal-gallery-thumbs button {
  border: 2px solid transparent;
  padding: 0;
  background: #dedbd4;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  overflow: hidden;
}

.modal-gallery-thumbs button.active {
  border-color: #b69a68;
}

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

@media (max-width: 600px) {
  .modal-image-slot {
    min-height: 330px;
  }

  .modal-image-slot .modal-image {
    min-height: 0;
    height: auto;
  }

  .modal-gallery-controls {
    left: 10px;
    right: 10px;
  }

  .modal-gallery-controls button {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  .modal-gallery-controls span {
    margin-top: -115px;
  }

  .modal-gallery-thumbs {
    padding: 8px 10px;
  }

  .modal-gallery-thumbs button {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }
}

.modal-image{cursor:default}
.lightbox{position:fixed;inset:0;z-index:240;background:#000;display:none;touch-action:none;overscroll-behavior:contain}
.lightbox.open{display:block}
.lightbox-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.lightbox-image{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;transition:transform .04s linear;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lightbox-image.zoomed{cursor:grab}
.lightbox-close{position:absolute;top:14px;right:16px;z-index:2;width:46px;height:46px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;border-radius:50%;display:grid;place-items:center;line-height:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;border-radius:50%;display:grid;place-items:center;line-height:1}
.lightbox-prev{left:12px}.lightbox-next{right:12px}
.lightbox-nav[hidden]{display:none}
.lightbox-bottom{position:absolute;left:0;right:0;bottom:18px;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px}
.lightbox-zoom{border:0;background:rgba(255,255,255,.16);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:11px 18px;border-radius:30px}
.lightbox-counter{color:#fff;font-size:12px;opacity:.85}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible,.lightbox-zoom:focus-visible{outline:2px solid #fff;outline-offset:2px}

.modal-options{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.option-group{display:flex;flex-direction:column;gap:8px}
.option-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#8f8b83;font-weight:600}
.option-buttons{display:flex;flex-wrap:wrap;gap:8px}
.option-button{border:1px solid var(--line,#d9d5cc);background:#fff;padding:9px 15px;font:13px "DM Sans",sans-serif;cursor:pointer;min-height:40px;transition:.15s}
.option-button:hover{border-color:#11110f}
.option-button.active{border-color:#11110f;background:#11110f;color:#fff}
.option-button:focus-visible{outline:2px solid #c29b55;outline-offset:2px}

.option-button .option-price{opacity:.65;font-size:11px;margin-left:3px}
.option-button.active .option-price{opacity:.9}