:root {
  /* theme primary color (Customizer), the same one the "Proceed to checkout" button uses; set per site */
  --roses-primary: #354945;
}

/* the class is added by the script, so without JS the coupon field stays visible */
/* selector mirrors the theme's "table.cart td.actions .coupon" to win on specificity */
table.cart td.actions .coupon.roses-coupon-collapsible:not(.is-open) {
  display: none;
}

/* the toggle is a <button> inside td.actions, so the theme's cart button styles apply; "#page" is needed to win over them */
#page table.cart td.actions button.roses-coupon-toggle {
  display: block;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

#page table.cart td.actions button.roses-coupon-toggle:hover,
#page table.cart td.actions button.roses-coupon-toggle:focus {
  background: none;
  color: inherit;
  text-decoration: none;
}

#page table.cart td.actions .coupon button[name="apply_coupon"] {
  background-color: var(--roses-primary);
  color: #fff;
}

#page table.cart td.actions .coupon button[name="apply_coupon"]:hover,
#page table.cart td.actions .coupon button[name="apply_coupon"]:focus {
  background-color: var(--roses-primary);
  color: #fff;
  filter: brightness(0.9);
}