/* Otto Quick Shop - panel that covers the product card */
.otto-qs-open { position: relative !important; }
.otto-qs {
  position: absolute; inset: 0; z-index: 20; background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 14px 14px 16px;
  display: flex; flex-direction: column; align-items: stretch; text-align: center;
  animation: otto-qs-in .18s ease-out;
}
@keyframes otto-qs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.otto-qs-loading { margin: auto; width: 28px; height: 28px; border: 3px solid #e3e8ef; border-top-color: #2a7bd5; border-radius: 50%; animation: otto-qs-spin .8s linear infinite; }
@keyframes otto-qs-spin { to { transform: rotate(360deg); } }
.otto-qs-close {
  align-self: flex-end; background: none; border: 0; padding: 0 0 6px; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; line-height: 1;
}
.otto-qs-close:hover { color: #2a7bd5; }
.otto-qs-img { flex: 0 0 auto; margin: 0 auto 6px; max-height: 34%; opacity: .18; pointer-events: none; }
.otto-qs-img img { max-height: 100%; width: auto; }
.otto-qs-label { font-weight: 700; font-size: 14px; color: #222; margin: 4px 0 6px; }
.otto-qs-select {
  width: 100%; padding: 10px 36px 10px 14px; border: 1.5px solid #6b5a3a; border-radius: 999px; background: #fff; color: #222;
  font-size: 15px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.otto-qs-select:focus { outline: none; border-color: #2a7bd5; }
.otto-qs-price { margin: 12px 0 10px; font-size: 20px; font-weight: 700; color: #2a7bd5; }
.otto-qs-price del { color: #9aa3ad; font-weight: 400; font-size: 15px; margin-right: 6px; }
.otto-qs-price ins { text-decoration: none; }
.otto-qs-add {
  width: 100%; padding: 12px 10px; border: 0; border-radius: 6px; background: #2a7bd5; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.otto-qs-add:hover { background: #1f66b8; }
.otto-qs-add:disabled { background: #a9c7ea; cursor: not-allowed; }
.otto-qs-msg { margin-top: 8px; font-size: 13px; color: #444; min-height: 1em; }
.otto-qs-msg a { color: #2a7bd5; font-weight: 600; }
/* on very short cards let the panel grow past the card */
@media (max-width: 767px) { .otto-qs { padding: 12px; } .otto-qs-img { display: none; } }

/* header mini-cart: force open briefly after an add-to-cart (theme normally shows it on hover) */
.header-shop-cart.otto-cart-open .header-mini-cart {
  display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  transform: none !important; transition: opacity .2s ease;
}

/* mobile / touch: the mini-cart becomes a right-hand drawer, like the menu slide-over */
.otto-cart-close { display: none; }
@media (max-width: 1024px), (hover: none) {
  .header-shop-cart .header-mini-cart {
    position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
    width: 86vw !important; max-width: 380px !important; height: 100vh !important; margin: 0 !important;
    background: #fff !important; box-shadow: -12px 0 30px rgba(0,0,0,.18) !important; z-index: 99999 !important;
    padding: 64px 20px 24px !important; overflow-y: auto !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    transform: translateX(105%) !important; will-change: transform;
    transition: transform .3s cubic-bezier(.22,.61,.36,1) !important; pointer-events: none !important;
  }
  .header-shop-cart.otto-cart-open .header-mini-cart { transform: none !important; pointer-events: auto !important; }
  .otto-cart-close {
    display: block; position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: #2a7bd5; color: #fff; font-size: 24px; line-height: 36px; text-align: center; cursor: pointer;
  }
}

/* theme pricing cards: plus icon on the Add To Cart button, and room for the panel */
.pricing-btn a.pricing-link::before,
a.pricing-link.tg-btn::before {
  content: "+"; display: inline-block; margin-right: 9px; font-weight: 700; line-height: 1;
  transform: translateY(1px);
}
.pricing-item.otto-qs-open, .pricing__box.otto-qs-open { position: relative !important; }
.pricing-item .otto-qs, .pricing__box .otto-qs { border-radius: 10px; }