/* ==========================================================================
   GP OVERRIDES
   Resets GeneratePress default button/element styles that bleed into
   custom components. Loads last — after GP, WooCommerce, design system.
   Enqueue in functions.php with dependency on 'design-system'.
   ========================================================================== */

/* ── Side cart — reset ALL bare button elements inside the panel.
   GP applies filled blue styles to bare <button> tags sitewide.
   Using #sc-panel for high specificity to guarantee a win. ── */

#sc-panel button {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  line-height: inherit !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ── Qty stepper buttons — explicit sizing after the reset above ── */
#sc-panel .sc-qty-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--color-text-muted) !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}
#sc-panel .sc-qty-btn:hover {
  color: var(--color-text) !important;
}

/* ── Close button — restyle after reset ── */
#sc-panel .sc-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-soft) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color 0.15s ease, color 0.15s ease !important;
}
#sc-panel .sc-close:hover {
  border-color: var(--color-text-soft) !important;
  color: var(--color-text) !important;
}

/* ── Remove button — restyle after reset ── */
#sc-panel .sc-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-soft) !important;
  cursor: pointer !important;
  padding: 4px !important;
  transition: color 0.15s ease !important;
}
#sc-panel .sc-remove:hover {
  color: var(--color-text) !important;
}

/* ── Coupon toggle — plain text link after reset ── */
#sc-panel .sc-coupon-toggle {
  display: block !important;
  width: 100% !important;
  padding: 12px 20px !important;
  text-align: left !important;
  color: var(--color-text-soft) !important;
  font-size: var(--fs-small) !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}
#sc-panel .sc-coupon-toggle:hover {
  color: var(--color-text) !important;
}

/* ── Coupon apply — superseded by gg-sidecart plugin's own sidecart.css
   (orange pill, fills solid on hover). Removed to stop this legacy,
   higher-specificity block from overriding the plugin's current styling. ── */

/* ── Coupon remove — text link after reset ── */
#sc-panel .sc-coupon-remove {
  color: var(--color-text-soft) !important;
  font-size: var(--fs-tiny) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}
#sc-panel .sc-coupon-remove:hover {
  color: var(--color-text) !important;
}

/* ── Item price — superseded by gg-sidecart plugin's own sidecart.css
   (muted, regular weight). Removed for the same reason as the coupon
   button above — this legacy block was overriding it. ── */

/* ── Item rhythm ── */
#sc-panel .sc-item-name { line-height: 1.2 !important; }
#sc-panel .sc-variant { margin-top: 1px !important; line-height: 1.2 !important; }
#sc-panel .sc-item-actions { margin-top: 6px !important; }
#sc-panel .sc-thumb { width: 72px !important; height: 72px !important; align-self: flex-start !important; }