/* Product Listing (Featured Products) */
:root {
  --gradient-start: #4f46e5;
  --gradient-end: #ec4899;
  --border: 214.3 31.8% 91.4%;
  --muted: 210 40% 96%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
}

.gb-products-container { padding: 1.5rem 0; max-width: 1400px; margin: 0 auto; }
.gb-products-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.gb-title-section { display: flex; align-items: center; gap: 0.75rem; background:#ffffff; border-radius: 14px; padding: 10px 14px; position: relative; box-shadow: 0 12px 30px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); overflow: hidden; }
.gb-title-section::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(135deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 55%); transform: rotate(20deg); animation: gb-shine 5s linear infinite; pointer-events:none; }

@keyframes gb-shine { 0% { transform: translateX(-20%) rotate(20deg); } 100% { transform: translateX(20%) rotate(20deg); } }
.gb-title-content h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.gb-title-content p { font-size: 0.875rem; color: hsl(var(--foreground) / 0.6); }
.gb-trending-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; background: linear-gradient(45deg, #ff6b6b, #ff9e7d); border-radius: 9999px; box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3); color: #fff; font-size: 0.75rem; font-weight: 700; }

.gb-nav { display: flex; gap: 0.5rem; }
.gb-nav-button { padding: 0.75rem; border-radius: 50%; background: white; border: 1px solid hsl(var(--border)); cursor: pointer; transition: all .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; }
.gb-nav-button:hover { background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end)); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,.3); color: #fff; }
.gb-nav-button:disabled { opacity: .5; cursor: not-allowed; }

.gb-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem; margin: 0 -.25rem; }
.gb-scroll::-webkit-scrollbar { display:none; }
.gb-pages { display: flex; gap: 1rem; padding-bottom: 1rem; transition: transform .5s ease; }
.gb-page { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; min-width: 100%; }

.gb-card { background: linear-gradient(145deg, #ffffff, #f5f5f5); border-radius: 1rem; overflow: hidden; box-shadow: 0 6px 15px rgba(0,0,0,.08); transition: all .3s ease; border: 1px solid hsl(var(--border) / .6); position: relative; display: flex; flex-direction: column; height: 100%; }
.gb-card:not(.shine)::before { content:''; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,0) 8%, rgba(255,255,255,0.18) 22%, rgba(255,255,255,0.28) 26%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0) 44%); transform: translateX(-135%); animation: gb-card-shine 3.2s linear infinite; z-index: 1; pointer-events:none; mix-blend-mode: normal; will-change: transform; }
.gb-card > * { position: relative; z-index: 1; }

/* Use global .shine::before from b2bcardssection.css when .shine is present */
.gb-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,.15); }

.gb-image-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 1rem 1rem 0 0; flex-shrink: 0; background: #f3f4f6; }
.gb-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, hsl(var(--muted)) 0%, hsl(var(--muted) / 0.8) 50%, hsl(var(--muted)) 100%); background-size: 200% 100%; animation: gb-shimmer 2s infinite; }
.gb-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; position: relative; }
.gb-card:hover .gb-img { transform: scale(1.08); }

.gb-float-actions { position: absolute; top: .5rem; right: .5rem; display:flex; flex-direction: column; gap:.4rem; opacity:0; transition: all .3s ease; z-index: 2; }
.gb-card:hover .gb-float-actions { opacity: 1; }
.gb-heart { padding: .5rem; background: rgba(255,255,255,.95); backdrop-filter: blur(4px); border-radius: 50%; border: none; cursor:pointer; transition: all .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; color:#64748b; }
.gb-heart.liked { background:#ff6b6b; color:#fff; }
.gb-price-badge { position:absolute; bottom:.5rem; left:.5rem; padding:.4rem .8rem; background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end)); color:#fff; border-radius:9999px; font-weight:700; font-size:.75rem; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.gb-discount { position:absolute; top:.5rem; left:.5rem; padding:.25rem .5rem; background:#10b981; color:#fff; border-radius:.375rem; font-weight:700; font-size:.7rem; z-index:2; }

.gb-info { padding: .875rem; display:flex; flex-direction:column; gap:.625rem; flex-grow:1; justify-content:space-between; }
.gb-info h3 { font-weight:700; font-size:.9rem; color:#111827; line-height:1.3; display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gb-seller { font-size:.75rem; color:#6b7280; }
.gb-rating { display:flex; align-items:center; gap:.25rem; margin-bottom:.5rem; font-size:.75rem; }

.gb-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:space-between; }
.gb-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:.375rem; padding:.5rem; border-radius:.75rem; font-size:.75rem; font-weight:600; border:none; cursor:pointer; transition: all .3s ease; box-shadow: 0 4px 10px rgba(0,0,0,.1); min-width:0; }
.gb-btn-primary { background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end)); color:#fff; }
.gb-btn-primary i.fa-phone { animation: none; /* JS will toggle .gb-flicker for 2s bursts */ }
.gb-btn-primary i.fa-phone.gb-flicker { animation: gb-phone-flicker 2s ease-in-out 1; will-change: opacity, transform, filter; }
.gb-btn-outline i.fab.fa-whatsapp { color: #25D366; }
.gb-btn-outline { background:#fff; color:#111827; border:1px solid hsl(var(--border)); }
.gb-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }

.gb-actions-full {
    display: flex;
    margin-top: 0.5rem; /* Add some space above the share button */
}

.Btn {
  width: 100%; /* Make button full width of its container */
  /* Match .gb-btn sizing */
  padding: .5rem;
  font-size: .75rem;
  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 5px 5px 0px #4dc6d93d;
  background-size: 400% 400%;
  border-radius: .75rem; /* Match other buttons' border radius */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Button State Management */
.Btn.btn-idle {
  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  cursor: pointer;
  opacity: 1;
}

.Btn.btn-processing {
  background: linear-gradient(-45deg, #fbbf24, #f59e0b, #fbbf24, #f59e0b);
  cursor: wait;
  animation: btn-pulse 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

/* Progress bar for processing state */
.Btn.btn-processing::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: btn-progress 2s linear infinite;
}

.Btn.btn-success {
  background: linear-gradient(-45deg, #10b981, #059669, #10b981, #059669);
  cursor: default;
  animation: btn-success-flash 0.6s ease-out;
}

.Btn.btn-error {
  background: linear-gradient(-45deg, #ef4444, #dc2626, #ef4444, #dc2626);
  cursor: pointer;
  animation: btn-error-shake 0.5s ease-in-out;
}

/* Loading spinner for processing state */
.Btn.btn-processing .svgContainer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: btn-spin 1s linear infinite;
}

.Btn.btn-processing svg {
  opacity: 0;
}

/* Success checkmark animation */
.Btn.btn-success .svgContainer::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  animation: btn-checkmark 0.3s ease-out;
}

.Btn.btn-success svg {
  opacity: 0;
}

/* Error icon animation */
.Btn.btn-error .svgContainer::after {
  content: '✗';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  animation: btn-error-icon 0.3s ease-out;
}

.Btn.btn-error svg {
  opacity: 0;
}

.svgContainer {
  width: 45px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svgContainer svg {
  width: 16px;
}

.svgContainer svg path {
  fill: white;
}

.textContainer {
  flex-grow: 1; /* Allow text container to fill remaining space */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.Btn:hover {
  animation: gradient 5s ease infinite;
}

/* Hover effects for different states */
.Btn.btn-idle:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #4dc6d93d, 0 8px 20px rgba(0,0,0,.15);
}

.Btn.btn-processing:hover {
  /* No hover effect during processing */
  transform: none;
}

.Btn.btn-success:hover {
  /* Subtle hover effect for success state */
  transform: translateY(-1px);
}

.Btn.btn-error:hover {
  /* Allow hover on error state to encourage retry */
  transform: translateY(-1px);
  box-shadow: 6px 6px 0px #4dc6d93d, 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Click effect */
.Btn.btn-clicked {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* Button State Animations */
@keyframes btn-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 5px 5px 0px #4dc6d93d;
  }
  50% {
    transform: scale(1.02);
    box-shadow: 6px 6px 0px #4dc6d93d, 0 0 15px rgba(251, 191, 36, 0.4);
  }
}

@keyframes btn-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes btn-success-flash {
  0% {
    transform: scale(1);
    box-shadow: 5px 5px 0px #4dc6d93d;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 6px 6px 0px #4dc6d93d, 0 0 20px rgba(16, 185, 129, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 5px 5px 0px #4dc6d93d;
  }
}

@keyframes btn-error-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@keyframes btn-checkmark {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

@keyframes btn-error-icon {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes btn-progress {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}


.gb-indicators { display:flex; justify-content:center; gap:.75rem; margin-top:1.5rem; }
.gb-indicator { border-radius:9999px; border:none; cursor:pointer; transition: all .3s ease; }
.gb-indicator.active { width:1.5rem; height:.5rem; background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end)); box-shadow: 0 0 15px rgba(79,70,229,.4); }
.gb-indicator.inactive { width:.5rem; height:.5rem; background: hsl(var(--muted)); }

@keyframes gb-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes gb-card-shine { 0% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes gb-phone-flicker {
  0%   { opacity: 1;   transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  8%   { opacity: .25; transform: scale(0.96); }
  16%  { opacity: 1;   transform: scale(1.02); }
  24%  { opacity: .25; transform: scale(0.96); }
  32%  { opacity: 1;   transform: scale(1.05); }
  40%  { opacity: .25; transform: scale(0.96); }
  48%  { opacity: 1;   transform: scale(1.06); }
  60%  { opacity: .5;  transform: scale(1.02); }
  72%  { opacity: 1;   transform: scale(1);   filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
  100% { opacity: 1;   transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* Responsive */
@media (min-width: 640px) { .gb-page { gap: 1rem; } }
@media (min-width: 768px) { .gb-products-container { padding: 2rem 1.5rem; } .gb-page { gap: 1.25rem; } }
@media (min-width: 1024px) { .gb-page { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .gb-page { grid-template-columns: repeat(4, 1fr); } }