/* Merch store styles. Loaded AFTER css/donate.css, which supplies the shared
   navbar, body background, .container shell and mobile-menu behaviour. This file
   only adds the storefront-specific pieces (product grid + cart). */

/* Give the product grid more room than the cart on desktop. */
.store-main {
  flex: 1 1 62%;
  min-width: 340px;
  display: flex;
  flex-direction: column;
}

.store-side {
  flex: 1 1 33%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 769px) {
  .store-side {
    position: sticky;
    top: 8rem;
    height: fit-content;
  }
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  background: linear-gradient(135deg, #242a3a 0%, #333b4d 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(59, 130, 246, 0.15);
}

.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.18), transparent 60%),
    linear-gradient(135deg, #161d2a 0%, #242a3a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder shown for products without a Stripe image. */
.product-media .media-fallback {
  font-family: "Hanson", sans-serif;
  font-size: 2.6rem;
  color: rgba(96, 165, 250, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.4));
}

/* "Pickup only" badge on product media. */
.pickup-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(10, 14, 22, 0.82);
  color: #cdd9ec;
  border: 1px solid rgba(59, 130, 246, 0.5);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.pickup-badge i {
  color: #60a5fa;
}

.product-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-name {
  font-weight: 600;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}

.product-desc {
  color: #aab3c5;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.product-price {
  font-family: "Hanson", sans-serif;
  color: #60a5fa;
  font-size: 1.35rem;
  margin: 0 0 0.9rem;
}

.size-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #8b95a7;
  font-size: 0.75rem;
  margin: -0.4rem 0 0.8rem;
}

.size-hint i {
  color: #60a5fa;
}

.product-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---- Quantity stepper ---- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #333b4d;
  border-radius: 8px;
  overflow: hidden;
  background: #161d2a;
}

.qty button {
  background: transparent;
  border: none;
  color: #cbd5e1;
  width: 32px;
  height: 38px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.qty button:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #fff;
}

.qty input {
  width: 40px;
  height: 38px;
  text-align: center;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-add {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

.btn-add.added {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* ---- Bundle upsell (shown on the tee + hoodie cards) ---- */
.bundle-upsell {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(59, 130, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.bundle-upsell-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.bundle-save {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0a0a0a;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
}

.bundle-text {
  font-size: 0.78rem;
  color: #aab3c5;
  line-height: 1.25;
}

.btn-bundle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  background: rgba(59, 130, 246, 0.14);
  color: #dbe6f7;
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-bundle:hover {
  background: rgba(59, 130, 246, 0.28);
  transform: translateY(-1px);
}

.btn-bundle.added {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: transparent;
  color: #fff;
}

/* ---- Cart ---- */
.cart {
  background: linear-gradient(135deg, #242a3a 0%, #333b4d 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 14px;
  padding: 1.35rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cart-title {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Hanson", monospace;
  font-size: 1.2rem;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-count {
  -webkit-text-fill-color: #fff;
  background: #3b82f6;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-empty {
  color: #8b95a7;
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0.5rem;
  font-style: italic;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.cart-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cart-item-main {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Per-unit apparel size selectors */
.cart-item-sizes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  background: rgba(59, 130, 246, 0.07);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.size-unit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.size-unit-num {
  color: #8b95a7;
  font-size: 0.72rem;
  font-weight: 600;
  min-width: 1.6rem;
}

.size-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.size-pick > span {
  color: #aab3c5;
  font-size: 0.75rem;
  white-space: nowrap;
}

.size-select {
  flex: 1;
  min-width: 0;
  background: #161d2a;
  border: 1px solid #333b4d;
  border-radius: 6px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.size-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.size-select.missing {
  border-color: rgba(255, 107, 53, 0.7);
}

.cart-item-thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #161d2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-family: "Hanson", sans-serif;
  font-size: 1.1rem;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.cart-item-unit {
  color: #8b95a7;
  font-size: 0.78rem;
}

.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.cart-item-line {
  color: #60a5fa;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.cart-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
}

.cart-qty button {
  background: #161d2a;
  border: 1px solid #333b4d;
  color: #cbd5e1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.2s ease;
}

.cart-qty button:hover {
  background: rgba(59, 130, 246, 0.25);
  color: #fff;
}

.cart-qty span {
  color: #fff;
  font-size: 0.85rem;
  min-width: 16px;
  text-align: center;
}

.cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  margin-left: 0.15rem;
  transition: color 0.2s ease;
}

.cart-remove:hover {
  color: #ff6b35;
}

/* ---- Fulfilment toggle ---- */
.fulfilment {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}

.fulfilment-label {
  color: #60a5fa;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.fulfilment-opts {
  display: flex;
  gap: 0.6rem;
}

.fulfilment-opt {
  flex: 1;
  border: 1px solid #333b4d;
  border-radius: 10px;
  padding: 0.7rem 0.6rem;
  cursor: pointer;
  background: #161d2a;
  transition: border-color 0.2s ease, background 0.2s ease;
  text-align: center;
}

.fulfilment-opt:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.fulfilment-opt.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #16294a 0%, #243b5a 100%);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
}

/* Shipping option locked because the cart has a pickup-only item. */
.fulfilment-opt.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.fulfilment-opt input {
  display: none;
}

.fulfilment-opt .opt-title {
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  display: block;
}

.fulfilment-opt .opt-sub {
  color: #8b95a7;
  font-size: 0.75rem;
  display: block;
  margin-top: 0.15rem;
}

/* Shipping disclaimer shown when "Ship it" is selected. */
.ship-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #cdd9ec;
  font-size: 0.78rem;
  line-height: 1.35;
}

.ship-note i {
  color: #60a5fa;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

/* ---- Optional stream shout-out ---- */
.shoutout {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.75rem;
  padding-top: 0.9rem;
}

.shoutout-label {
  color: #60a5fa;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.55rem;
}

.shoutout-label span {
  color: #8b95a7;
  font-weight: 400;
}

.shoutout input,
.shoutout textarea {
  width: 100%;
  box-sizing: border-box;
  background: #161d2a;
  border: 1px solid #333b4d;
  border-radius: 8px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shoutout textarea {
  resize: vertical;
  min-height: 2.4rem;
}

.shoutout input:focus,
.shoutout textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.shoutout input::placeholder,
.shoutout textarea::placeholder {
  color: #64748b;
}

.shoutout-hint {
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.35;
}

/* ---- Cart totals + checkout ---- */
.cart-totals {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  font-size: 0.9rem;
}

.cart-row {
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
  margin-bottom: 0.4rem;
}

.cart-row.grand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

.cart-row.grand span:last-child {
  color: #60a5fa;
  font-family: "Hanson", sans-serif;
}

.btn-checkout {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 0.9rem;
  font-size: 1.05rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn-checkout:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
}

.btn-checkout:disabled {
  background: linear-gradient(135deg, #555, #666);
  cursor: not-allowed;
}

.cart-secure {
  text-align: center;
  color: #64748b;
  font-size: 0.75rem;
  margin-top: 0.7rem;
}

.cart-secure i {
  color: #3b82f6;
}

.store-error {
  color: #ff6b35;
  font-size: 0.85rem;
  margin-top: 0.6rem;
  text-align: center;
}

/* ---- Loading / status banners ---- */
.store-loading {
  color: #60a5fa;
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1rem;
}

.store-banner {
  width: 100%;
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.4;
}

.store-banner.success {
  background: linear-gradient(90deg, #16a34a, #15803d);
  color: #fff;
}

.store-banner.canceled {
  background: linear-gradient(90deg, #6b7280, #4b5563);
  color: #fff;
}

.store-banner .banner-body {
  flex: 1;
}

.store-banner .banner-body small {
  display: block;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* Reuse donate's stacked layout on mobile. */
@media (max-width: 768px) {
  .store-main,
  .store-side {
    flex: none;
    min-width: unset;
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}