/* Prototype overrides on top of the captured eva.ua styles.
   Add-to-cart button follows EVA Library WEB:
   default  — node 8138:51155 (Secondary, Only Icon, 40px)
   added    — node 9026:63376 (black bg, cart-check icon) */

html, body { background: #fff; }

/* Phones show no scrollbars; prod's orange desktop scrollbar showed up as stripes in the frame */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* Sort select: one line, truncated with an ellipsis */
.eva-default-select-trigger { min-width: 0; overflow: hidden; }
.eva-default-select-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.add-to-cart-icon.proto-cart-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid #212121;
  box-shadow: none;
  background: #fff;
  color: #212121;
  overflow: visible;
  transition:
    background-color var(--eva-motion-duration-base, .2s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1)),
    border-color     var(--eva-motion-duration-fast, .1s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1)),
    color            var(--eva-motion-duration-base, .2s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1)),
    transform        var(--eva-motion-duration-fast, .1s) var(--eva-motion-easing-spring, cubic-bezier(.34,1.56,.64,1));
  -webkit-tap-highlight-color: transparent;
}
.add-to-cart-icon.proto-cart-btn:not(:disabled):hover,
.add-to-cart-icon.proto-cart-btn:not(:disabled):focus-visible,
.add-to-cart-icon.proto-cart-btn:not(:disabled):active {
  background: #fff;
  border-color: #212121;
  color: #212121;
}

/* Added — Primary look (Figma 9026:63376); bg + color transition, icon swaps instantly */
.add-to-cart-icon.proto-cart-btn.in-cart,
.add-to-cart-icon.proto-cart-btn.in-cart:not(:disabled):hover,
.add-to-cart-icon.proto-cart-btn.in-cart:not(:disabled):focus-visible,
.add-to-cart-icon.proto-cart-btn.in-cart:not(:disabled):active {
  background: #000;
  border-color: #000;
  color: #fff;
}

.proto-cart-btn .proto-cart-glyph { width: 20px; height: 20px; display: block; }
.proto-cart-btn .cart-icon-success { display: none; }
.proto-cart-btn.in-cart .cart-icon-default { display: none; }
.proto-cart-btn.in-cart .cart-icon-success { display: block; }

.proto-cart-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #76BF44;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .5s ease-out;
}

/* "Додано до кошика" toast — sits above the tab bar (and the sticky Filters bar when it is shown) */
.proto-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 69px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #212121;
  color: #fff;
  font: 600 14px/20px ProximaNova, sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--eva-motion-duration-base, .2s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1)),
    transform var(--eva-motion-duration-expand, .25s) var(--eva-motion-easing-spring, cubic-bezier(.34,1.56,.64,1)),
    bottom .3s cubic-bezier(.4,0,.2,1);
}
.proto-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.proto-toast .proto-cart-glyph { flex-shrink: 0; }

/* Variant picker — bottom sheet shown before adding a configurable product */
.proto-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--eva-motion-duration-expand, .25s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1));
}
.proto-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.proto-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  background: #fff;
  color: #212121;
  font-family: ProximaNova, sans-serif;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2,0,0,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.proto-sheet.is-open { transform: translateY(0); }
.proto-sheet.is-dragging { transition: none; }

.proto-sheet-handle { padding: 8px 0 4px; display: flex; justify-content: center; touch-action: none; cursor: grab; }
.proto-sheet-handle::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: #d8d8d8; }

.proto-sheet-head {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 8px 16px 16px;
  border-bottom: 1px solid #ebebeb;
  touch-action: none;
}
.proto-sheet-img { width: 72px; height: 72px; flex-shrink: 0; object-fit: contain; }
.proto-sheet-info { min-width: 0; padding-right: 32px; }
.proto-sheet-brand { font-size: 14px; line-height: 20px; font-weight: 600; }
.proto-sheet-name {
  font-size: 14px;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proto-sheet-price { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.proto-sheet-final { font-size: 18px; line-height: 24px; font-weight: 700; }
.proto-sheet-old { font-size: 13px; line-height: 15px; color: #919191; text-decoration: line-through; }
.proto-sheet-discount {
  padding: 2px 8px;
  border-radius: 4px;
  background: #FFCCCC;
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
}
.proto-sheet-close {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #212121;
}

.proto-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.proto-sheet-label { font-size: 14px; line-height: 20px; margin-bottom: 12px; color: #616161; }
.proto-sheet-label b { color: #212121; font-weight: 600; }

.proto-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 12px 8px; }
.proto-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 16px;
  color: #212121;
  -webkit-tap-highlight-color: transparent;
}
.proto-swatch-dot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  transition: box-shadow var(--eva-motion-duration-fast, .1s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1));
}
.proto-swatch-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proto-swatch[aria-checked="true"] .proto-swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #212121; }
.proto-swatch[aria-checked="true"] .proto-swatch-text { font-weight: 600; }
.proto-swatch-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proto-swatch:disabled { color: #b5b5b5; cursor: not-allowed; }
.proto-swatch:disabled .proto-swatch-dot { opacity: .4; }
.proto-swatch:disabled .proto-swatch-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1.5px;
  background: #212121;
  transform: rotate(45deg);
}

.proto-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.proto-chip {
  min-width: 64px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1.5px solid #d8d8d8;
  font-size: 14px;
  color: #212121;
  transition: border-color var(--eva-motion-duration-fast, .1s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1));
}
.proto-chip[aria-checked="true"] { border-color: #212121; font-weight: 600; }
.proto-chip:disabled { color: #b5b5b5; border-style: dashed; cursor: not-allowed; }

.proto-sheet-foot { padding: 12px 16px 16px; border-top: 1px solid #ebebeb; }
.proto-sheet-add {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background: #212121;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background-color var(--eva-motion-duration-base, .2s) var(--eva-motion-easing-standard, cubic-bezier(.2,0,0,1)), transform var(--eva-motion-duration-fast, .1s) var(--eva-motion-easing-spring, cubic-bezier(.34,1.56,.64,1));
}
.proto-sheet-add:active:not(:disabled) { transform: scale(.98); }
.proto-sheet-add:disabled { background: #ebebeb; color: #919191; cursor: not-allowed; }

/* Bottom-nav cart counter */
/* Hidden via scale(0) from its own centre; grows as a pill with the number (min-width, not fixed width) */
.proto-cart-count {
  position: absolute;
  top: -5px;
  left: calc(50% + 4px);
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #F58220;
  color: #fff;
  font: 600 9px/1 ProximaNova, sans-serif;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  z-index: 1;
}
.has-badge > .proto-cart-count { transform: scale(1); }

.m-icon-action__icon > svg { transition: transform 180ms cubic-bezier(.34,1.56,.64,1); }

.proto-nav-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #76BF44;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .45s ease-out;
}