/**
 * Groser Theme — Cart Stepper CSS FINAL
 * Supports both shop grid (Layout A) and homepage grid (Layout B)
 */

:root {
  --gc-primary:      #cc2229;
  --gc-primary-dark: #a31a20;
  --gc-primary-bg:   #fdf0f0;
  --gc-danger:       #e53935;
  --gc-border:       #e0e0e0;
  --gc-text:         #1a1a1a;
  --gc-radius:       6px;
  --gc-height:       42px;
}

/* ── PERMANENTLY HIDE VIEW BASKET ───────────────────────────────────────────── */
/* Belt AND braces — hide via class AND via selector */
.gc-gone {
  display: none !important;
}

/* Also hide by selector in case gc-gone hasn't been applied yet */
.product-info a.added_to_cart,
.product-info a.wc-forward,
.product-info a.custom-view-cart,
.product-info a.view-basket,
.viando-6_lower-box a.added_to_cart,
.viando-6_lower-box a.wc-forward,
.viando-6_lower-box a.custom-view-cart,
.viando-6_lower-box a.view-basket {
  display: none !important;
}

/* ── ADD TO CART BUTTON LOADING STATE ───────────────────────────────────────── */
.add_to_cart_button.gc-btn--loading {
  opacity:        0.55;
  pointer-events: none;
  position:       relative;
}
.add_to_cart_button.gc-btn--loading::after {
  content:          "";
  position:         absolute;
  right:            10px;
  top:              50%;
  transform:        translateY(-50%);
  width:            13px;
  height:           13px;
  border:           2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius:    50%;
  animation:        gc-spin 0.6s linear infinite;
}

.add_to_cart_button.gc-btn--in {
  animation: gc-grow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes gc-grow {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── STEPPER ────────────────────────────────────────────────────────────────── */
.gc-stepper {
  display:       flex;
  align-items:   center;
  width:         100%;
  height:        var(--gc-height);
  border:        2px solid var(--gc-primary);
  border-radius: var(--gc-radius);
  background:    #fff;
  box-sizing:    border-box;
  overflow:      hidden;
  position:      relative;

  opacity:   0;
  transform: scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.14s ease;
}

.gc-stepper.gc-stepper--on {
  opacity:   1;
  transform: scale(1);
}

.gc-stepper.gc-stepper--out {
  opacity:        0 !important;
  transform:      scale(0.9) !important;
  pointer-events: none;
  transition:     opacity 0.14s ease, transform 0.14s ease;
}

/* Syncing — spinner on, buttons tappable */
.gc-stepper.gc-s--sync { border-color: var(--gc-border); }
.gc-stepper.gc-s--sync .gc-s-btn,
.gc-stepper.gc-s--sync .gc-s-num { opacity: 0.6; }

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.gc-s-btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            38px;
  min-width:        38px;
  height:           100%;
  border:           none;
  background:       transparent;
  color:            var(--gc-primary);
  cursor:           pointer;
  padding:          0;
  outline:          none;
  user-select:      none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.gc-s-btn:hover  { background: var(--gc-primary-bg); }
.gc-s-btn:active { transform: scale(0.8); background: var(--gc-primary); color: #fff; }
.gc-s-minus { border-right: 1px solid var(--gc-border); }
.gc-s-plus  { border-left:  1px solid var(--gc-border); }

/* ── QTY INPUT ──────────────────────────────────────────────────────────────── */
.gc-s-track {
  flex: 1; display: flex; align-items: center;
  justify-content: center; height: 100%; min-width: 0;
}
.gc-s-num {
  width: 100% !important; height: 100% !important;
  border: none !important; outline: none !important;
  box-shadow: none !important; background: transparent !important;
  text-align: center; font-size: 15px; font-weight: 700;
  color: var(--gc-text); padding: 0 2px;
  -moz-appearance: textfield; appearance: textfield; min-width: 0;
}
.gc-s-num::-webkit-inner-spin-button,
.gc-s-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gc-s-num:focus { background: var(--gc-primary-bg) !important; }

/* ── SPINNER ────────────────────────────────────────────────────────────────── */
.gc-s-spin {
  display: none; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); width: 11px; height: 11px;
  border: 2px solid var(--gc-border); border-top-color: var(--gc-primary);
  border-radius: 50%; animation: gc-spin 0.55s linear infinite;
  pointer-events: none;
}
.gc-stepper.gc-s--sync .gc-s-spin { display: block; }

@keyframes gc-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── BADGE ──────────────────────────────────────────────────────────────────── */
.gc-badge-pop { animation: gc-badge 0.28s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes gc-badge { 0%,100%{transform:scale(1)} 50%{transform:scale(1.55)} }

/* ── TOAST ──────────────────────────────────────────────────────────────────── */
#gc-toasts {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 999999; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.gc-toast {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 100px; font-size: 13.5px;
  font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  white-space: nowrap; max-width: 92vw; opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.gc-toast--show    { opacity: 1; transform: translateY(0) scale(1); }
.gc-toast--success { background: var(--gc-primary); }
.gc-toast--error   { background: var(--gc-danger); }
.gc-toast, .gc-toast *, .gc-t-icon, .gc-t-msg { color: #fff !important; }
.gc-t-icon { font-size: 12px; font-weight: 800; }

/* ── MOBILE ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --gc-height: 44px; }
  .gc-s-btn { width: 40px; min-width: 40px; }
}
@media (max-width: 480px) {
  #gc-toasts { bottom: 14px; }
  .gc-toast { font-size: 13px; padding: 9px 15px; }
}