/* ============================================================
   SNIPCART CUSTOM THEME — Gemstone Snappers
   Modern, premium cart redesign with large thumbnails
   ============================================================ */

/* ─── Cart Sidebar / Modal ─── */
.snipcart-modal__container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.snipcart-cart-header {
  background: linear-gradient(135deg, #1a0f0f 0%, #2d1515 100%) !important;
  color: #fff !important;
  padding: 20px 24px !important;
  border-bottom: 2px solid #f20d0d !important;
}

.snipcart-cart-header__title {
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

/* Close button in cart header */
.snipcart-cart-header__close-button,
.snipcart-modal__close,
.snipcart-layout__close,
[class*="snipcart"][class*="close"] {
  color: #fff !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.snipcart-cart-header__close-button:hover,
.snipcart-modal__close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.05) !important;
}

/* Backdrop overlay */
.snipcart-modal__overlay,
.snipcart-overlay {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ─── Cart Item Lines — Modern Card Layout ─── */
.snipcart-item-line {
  padding: 20px 16px !important;
  border-bottom: 1px solid #f0eded !important;
  transition: background-color 0.2s ease !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.snipcart-item-line:hover {
  background-color: #faf8f8 !important;
}

/* ─── Product Thumbnails — LARGE & MODERN ─── */
.snipcart-item-line__media {
  width: 100px !important;
  min-width: 100px !important;
  height: 100px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #f8f5f5, #efe9e9) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
}

.snipcart-item-line__media--small {
  width: 100px !important;
  min-width: 100px !important;
  height: 100px !important;
}

.snipcart-item-line__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
  transition: transform 0.3s ease !important;
}

.snipcart-item-line:hover .snipcart-item-line__image {
  transform: scale(1.05) !important;
}

/* ─── Product Info ─── */
.snipcart-item-line__header {
  margin-bottom: 4px !important;
}

.snipcart-item-line__title {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #1a0f0f !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.snipcart-item-line__variants {
  font-size: 0.75rem !important;
  color: #8a7e7e !important;
  margin-top: 2px !important;
}

/* ─── Price Styling ─── */
.snipcart-item-line__price {
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #1a0f0f !important;
}

/* ─── Quantity Controls ─── */
.snipcart-item-quantity__quantity {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #1a0f0f !important;
}

.snipcart-item-quantity__button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1.5px solid #e8e2e2 !important;
  background: #fff !important;
  color: #f20d0d !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.snipcart-item-quantity__button:hover {
  background: #f20d0d !important;
  color: #fff !important;
  border-color: #f20d0d !important;
  transform: scale(1.05) !important;
}

.snipcart-item-quantity__input {
  font-weight: 700 !important;
}

/* ─── Remove/Trash Button ─── */
.snipcart-item-line__remove,
.snipcart-button-icon.is-danger {
  color: #c4b8b8 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  padding: 4px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.snipcart-item-line__remove svg,
.snipcart-button-icon.is-danger svg {
  width: 14px !important;
  height: 14px !important;
}

.snipcart-item-line__remove:hover,
.snipcart-button-icon.is-danger:hover {
  color: #f20d0d !important;
  transform: scale(1.05) !important;
}

/* ─── Cart Footer ─── */
.snipcart-cart__footer {
  border-top: 2px solid #f0eded !important;
  padding: 20px 16px !important;
  background: #faf8f8 !important;
}

.snipcart-cart__footer-col {
  padding: 4px 0 !important;
}

/* ─── Cart Total ─── */
.snipcart-cart-summary__content {
  font-weight: 800 !important;
}

.snipcart-cart-summary__title {
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #8a7e7e !important;
}

.snipcart-cart-summary__price {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1a0f0f !important;
}

/* ─── Checkout Button — Brand Red (#f20d0d) ─── */
.snipcart-cart__footer-buttons .snipcart-button-primary,
.snipcart-base-button--highlight,
.snipcart-button-primary {
  background: #f20d0d !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  padding: 14px 24px !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(242, 13, 13, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
}

.snipcart-cart__footer-buttons .snipcart-button-primary:hover,
.snipcart-base-button--highlight:hover,
.snipcart-button-primary:hover {
  background: #d90b0b !important;
  box-shadow: 0 6px 20px rgba(242, 13, 13, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* ─── Empty Cart State ─── */
.snipcart-empty-cart__title {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #1a0f0f !important;
}

/* ─── Item Description ─── */
.snipcart-item-description {
  font-size: 0.8rem !important;
  color: #8a7e7e !important;
  line-height: 1.4 !important;
}

/* ─── Scrollbar for cart content ─── */
.snipcart-cart__content::-webkit-scrollbar {
  width: 4px;
}

.snipcart-cart__content::-webkit-scrollbar-track {
  background: transparent;
}

.snipcart-cart__content::-webkit-scrollbar-thumb {
  background: #e0d8d8;
  border-radius: 4px;
}

.snipcart-cart__content::-webkit-scrollbar-thumb:hover {
  background: #c4b8b8;
}

/* ─── Discount / Promo Input ─── */
.snipcart-discount-box__input {
  border-radius: 10px !important;
  border: 1.5px solid #e8e2e2 !important;
  font-size: 0.85rem !important;
  padding: 10px 14px !important;
}

.snipcart-discount-box__input:focus {
  border-color: #f20d0d !important;
  box-shadow: 0 0 0 3px rgba(242, 13, 13, 0.1) !important;
}

.snipcart-discount-box__button {
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ─── Custom Fields (Metal, Size, Stone) — Hidden ─── */
.snipcart-item-custom-fields {
  display: none !important;
}

/* ─── Shipping notice text ─── */
.snipcart-cart__footer-shipping-fees-notice {
  font-size: 0.75rem !important;
  color: #b0a5a5 !important;
  font-style: italic !important;
}

/* ─── Animations ─── */
@keyframes snipcart-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.snipcart-item-line {
  animation: snipcart-fade-in 0.3s ease-out !important;
}

/* ============================================================
   MOBILE-SPECIFIC OPTIMIZATIONS (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── Keep site header ABOVE Snipcart on mobile ── */
  header.sticky {
    z-index: 100001 !important;
  }

  /* ── Push Snipcart container below the header ── */
  .snipcart-modal__container {
    top: 80px !important;
    height: calc(100vh - 80px) !important;
  }

  /* ── Push the overlay down too ── */
  .snipcart-layout__overlay {
    top: 80px !important;
  }

  /* ── Hide "Continue Shopping" button on mobile ── */
  .snipcart-button-link,
  .snipcart-cart__footer-buttons .snipcart-button-secondary,
  .snipcart-cart-button--secondary,
  a[class*="snipcart"][href="#/cart"],
  button.snipcart-button-link {
    display: none !important;
  }

  /* ── Even larger thumbnails on mobile (card style) ── */
  .snipcart-item-line__media,
  .snipcart-item-line__media--small {
    width: 90px !important;
    min-width: 90px !important;
    height: 90px !important;
    border-radius: 12px !important;
    margin-right: 14px !important;
  }

  .snipcart-item-line__title {
    font-size: 0.88rem !important;
  }

  .snipcart-item-line {
    padding: 16px 12px !important;
  }

  .snipcart-cart-header {
    padding: 16px 16px !important;
  }

  .snipcart-item-quantity__button {
    width: 30px !important;
    height: 30px !important;
  }

  /* ── Centered logo & name on mobile ──
     The main header row becomes position:relative so that the
     hamburger and cart icons can be absolutely positioned at the
     edges, while the logo+name block sits in the true center. */

  /* Main header flex row */
  header.sticky>div>.flex.justify-between {
    justify-content: center !important;
    position: relative !important;
  }

  /* Hamburger button — pinned to the left edge */
  #mobile-menu-btn {
    position: absolute !important;
    left: -24px !important;
    /* Pushed fully left flush with padding */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  /* Search + Cart icons — pinned to the right edge */
  header.sticky>div>.flex.justify-between>.flex.items-center:last-child {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
  }

  /* Logo + brand name container — true center */
  header.sticky>div>.flex.justify-between>.flex-shrink-0 {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    margin-right: calc(auto + 20px) !important;
    /* Visual optical adjustment to the left */
    transform: translateX(-15px) !important;
    flex-shrink: 0 !important;
    max-width: calc(100% - 120px) !important;
    /* leave room for hamburger + icons */
  }

  /* Apply user's new larger mobile sizes (+15%) */
  header.sticky>div>.flex.justify-between>.flex-shrink-0 img {
    height: 81px !important;
  }

  header.sticky>div>.flex.justify-between>.flex-shrink-0 span {
    font-size: 1.30rem !important;
    /* Scaled down ~10% from 1.45rem per user request */
  }
}